当我将鼠标悬停在我的#icon div上时,会出现一个图像。当我从#icon移除鼠标时,图像消失。
问题
如果我将鼠标悬停在显示图像的空间上,如果我将鼠标悬停在#icon上,则会显示图像。我尝试过任何事情,所以我真的希望你能提供帮助。
我需要删除#image-divs
HTML
<div id="box">
<div id="icons1">
<div id="image1"></div>
</div>
<div id="icons2">
<div id="image2"></div>
</div>
<div id="icons3">
<div id="image3"></div>
</div>
<div id="icons4">
<div id="image4"></div>
</div>
</div>
CSS示例
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
答案 0 :(得分:6)
使用pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>
答案 1 :(得分:0)
请注意,在使用id时要指定每个div的每个悬停,你需要为每个div指定悬停效果,现在你应该使用它:
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
这意味着,无论何时悬停icon1,都会显示image1,等等。
你也可以尝试opactiy:0;和不透明度:1;
答案 2 :(得分:0)
最好的方法是使用pointer-events:none;
#image-divs{
pointer-events:none;
}