悬停效果在图像下方答案

【问题标题】：Hover effect is under the image悬停效果在图像下方
【发布时间】：2015-01-21 19:25:48
【问题描述】：

所以我正在努力解决悬停效果。黑框是图像，我希望每当用户将鼠标悬停在该图像上时将红色遮罩颜色（具有相同的宽度和高度）放置在黑框的前面，我不能这样做，因为看起来效果低于每当我将鼠标悬停在该图像上时该图像....

.third-effect .mask {
  opacity: 0;
  overflow: visible;
  border: 100px solid rgba(0, 0, 0, 0.7);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  width: 274px;
  height: 197px;
}
.third-effect a.info {
  position: relative;
  top: -10px;
  opacity: 0;
  -webkit-transition: opacity 0.5s 0s ease-in-out;
  -moz-transition: opacity 0.5s 0s ease-in-out;
  -o-transition: opacity 0.5s 0s ease-in-out;
  -ms-transition: opacity 0.5s 0s ease-in-out;
  transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
  opacity: 1;
  border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
  opacity: 1;
  -moz-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

<section class="module content">
  <div class="view third-effect">
    <img src="images/chronos.png" />
    <div class="mask">
      <a href="#" class="info" title="Full Image">Full Image</a> 
    </div>
  </div>
  </div>
  </div>

【问题讨论】：

请发布您的编码:)
如果您使用绝对定位，则将z-index:10 添加到您的蒙版样式中。
你不应该发布答案，如果你在解决问题上有任何进一步的问题，你应该在问题中更新它。

标签： javascript html css hover

【解决方案1】：

在您的 CSS 中，您可以使用 :hover 选择器在鼠标悬停时修改元素的样式。

查看此示例以了解如何使用它。 http://jsfiddle.net/wof159fh/

【讨论】：

【解决方案2】：

.third-effect .mask {

   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   width:274px;
   height:197px;


}

.third-effect a.info {
   position:relative;
   top:-10px;
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out; }

.third-effect:hover .mask  {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);

}


.third-effect:hover a.info {
	opacity:1;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

<section class="module content">


<div class="view third-effect">  
<img src="images/chronos.png" >
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
	
  </div>  
  </div>  
</div>
</div>

【讨论】：

【解决方案3】：

你可以这样做

#image {
  background-image: url('http://lorempixel.com/400/200/');
  width: 300px;
  background-size: cover;
  height: 300px;
}
#image:hover {
  background-color: red;
  background-image: none;
}

&lt;div id="image"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

我不确定您是否希望覆盖的 div 可点击或什么。您可以使用 javascript 进行设置。因此，您可以为“悬停”添加透明颜色，以某种颜色对其进行遮盖。例如：用红色设置不透明度 0.8。

还有我做过的方法。 http://jsfiddle.net/kv0fsLs2/

<div id="outer">
    <div id="image"></div>
    <div id="hover"></div>
</div>

#image {
    background-color:red;
}
#hover {
    position:absolute;
    background-color: blue;
}
div > div {
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
}
#outer {
    position:relative;
    left: 250px;
    top: 250px;
}

如果您不想对实际项目执行此操作，您可以将点击处理程序绑定到覆盖的 div。

编辑：在这里您可以使用不透明度来查看它...http://jsfiddle.net/kv0fsLs2/1/ 您需要做的就是让图像在那里而不是像我在最简单的示例中所做的那样使用红色背景。

编辑 2：这是另一个小提琴，实际上使用的是图像：http://jsfiddle.net/kv0fsLs2/2/

【讨论】：