禁用特定 div 上的悬停答案

【问题标题】：Disable hover on specific div禁用特定 div 上的悬停
【发布时间】：2017-08-11 15:25:38
【问题描述】：

当我将鼠标悬停在我的#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;
}

【问题讨论】：

添加一个工作演示或小提琴

标签： html css hover

【解决方案1】：

最好的方法是使用pointer-events:none;

#image-divs{
   pointer-events:none;
}

【讨论】：

【解决方案2】：

请注意，您在使用 id 时为每个 div 指定每次悬停，您需要为每个 div 指定悬停效果，现在您应该使用这个：

#image1{
display:none;
}

#icons1:hover #image1
display:block;
}

这意味着，只要您将 icon1 悬停，就会显示 image1，依此类推。

你也可以试试 opactiy:0;和不透明度：1；

【讨论】：

【解决方案3】：

使用pointer-events:none

div{pointer-events:none}
div:hover{color:red;}

&lt;div&gt;Hover over me&lt;/div&gt;

【讨论】：