htmlのかぶりについて
Q&A
Closed
解決したいこと
下のコードで画像の部分を押してもpタグが移動しないようにしたいです。
どなたかわかる方解決方法を教えて下さい。
説明不足のところがあれば言ってください。
発生している問題・エラー
<!DOCTYPE html>
<html>
<style>
body {
margin: 5px;
padding: 0;
}
.box {
padding: 15px;
font-weight: 500;
cursor: pointer;
margin: 2em auto;
padding: 1em;
width: 25%;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 0px 8px gray;
display: block;
margin: 0 0 0 auto;
left: 50px; /* 左からの位置指定 */
top: 50px;
z-index: 2;
}
.img {
width: 5.5%;
height: 5.5%;
border-radius: 10%;
background-image: url("image.jpg");
text-align: right;
}
</style>
<body>
<input type="image" src="My.jpeg" style=" display: block;margin: 0 0 0 auto; " onclick="display()" height="6%" width="6%"/> <div id="homebox" style="display:none;">
<div class="box">
<h2>test</h2>
</div>
<p>a</p>
<script>
var display = function () {
var div = document.getElementById('homebox');
state = div.style.display;
if (state == "none") {
div.setAttribute("style", "display:inline");
} else {
div.setAttribute("style", "display:none");
}
}
</script>
</body>
0
