Css 尝试在鼠标进入时使用鼠标悬停显示可单击的图像

读了很多可能的答案，但也许我没那么聪明。如果可能的话，我想使用CSS和html5而不是JavaScript来实现这一点，如果不行，我想我需要走这条路

以下是我想做的： 机器的图像显示在div内的页面上。 悬停时，我希望显示一个可单击的突出显示的图像版本

我还希望使用fadein标记可以看到其他信息性文本和图像。 当鼠标退出图像时，我希望高亮显示的版本以及其他图像和文本再次不可见。 我需要用10件设备来做这件事。都在同一页上

我在想，每件作品都需要在整体div中有自己的div

<!-- Animation Begins --> 
<div class="animated_lines" style="z-index: 910; margin-left: 0px; margin-top: 150px; opacity: 0.5;"> 

<!-- Vertical Blend Button Start -->    
<div class="productionlines" style="z-index: 920; margin-left: -350px; margin-top: -280px; opacity: 1;"> 
  <img src="images/productionlines/baked/verticalblender.png" /> 
</div> 
<!-- Vertical Blend Button End -->


.productionline { 
  background-image: url(images/productionlines/baked/verticalblender.png); 
} 
.productionline:hover { 
  background-image: url(images/productionlines/baked/verticalblender-highlighted.png); 
}

.productionline{
背景图片：url（images/productionlines/bake/verticalblender.png）；
} 
.productionline:悬停{
背景图片：url（图片/productionlines/baked/verticalblender highlighted.png）；
}

---

-谢谢

如果我理解正确，您需要在悬停时使用css更改图像

最简单的方法是将两个图像放入html，并使用display:none和display:block

 .image {
    cursor:pointer;
    position:relative;
    width: 112px;
    height: 112px;
}
.image .hover {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
}
.image:hover .hover {
    display:block;
}
.image:hover .original {
    display:none;
}

    <div class="main">
    <div class="image">
        <img class="original" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Cute-Ball-Search-icon.png" width="112" height="112" alt="" />
        <img class="hover" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Perspective-Button-Search-icon.png" width="112" height="112" alt="" />
    </div>
    <div class="image">
        <img class="original" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Cute-Ball-Search-icon.png" width="112" height="112" alt="" />
        <img class="hover" src="http://upload.wikimedia.org/wikipedia/commons/c/c0/Perspective-Button-Search-icon.png" width="112" height="112" alt="" />
    </div>
</div>

.image{
光标：指针；
位置：相对位置；
宽度：112px；
高度：112px；
}
.图像.悬停{
显示：无；
位置：绝对位置；
排名：0；
左：0；
}
。图片：悬停。悬停{
显示：块；
}
.图片：悬停。原创{
显示：无；
}

更新： 忘记指定图像类的宽度、高度和位置：相对。

---

我为您准备了一个示例：

我不确定您到底想要什么样的显示，但这就是您想要的吗

.productionlines { 
    opacity: 0.5;
    display: inline-block;
    cursor: pointer;

    transition: all 0.5s;
} 
.productionlines:hover{ 
    opacity: 1;
}
.productionlines .desc{
    opacity: 0;

    transition: all 0.5s;
}
.productionlines:hover .desc{
    opacity: 1;
}

<!-- HTML --> 
<div class="animated_lines">
    <!-- Vertical Blend Button Start -->    
    <div class="productionlines">
        <a href="http://google.ca">
            <img width="300px" src="http://cdx.dexigner.com/article/16326/Dell_Microsoft_PRODUCT_RED_Branded_Products_01_thumb.jpg" />
            <div class="desc">
                <h3>Your title</h3>
                <p>Some text here...</p>
            </div>
        </a>
    </div>
</div> <!-- Vertical Blend Button End -->

.productionlines{
不透明度：0.5；
显示：内联块；
光标：指针；
过渡：均为0.5s；
} 
.productionlines:悬停{
不透明度：1；
}
.生产线.描述{
不透明度：0；
过渡：均为0.5s；
}
.生产线：悬停。说明{
不透明度：1；
}

---

这里有一个提示：

请发布您已经启动的任何代码，最好是该代码的JSFIDLE或CodePen演示，以供测试。CSS看起来非常简单，但这可能是问题所在：.productionline{background image:url（images/productionlines/baked/verticalblender.png）；}.productionline:hover{background image:url（images/productionlines/baked/verticalblender highlighted.png）；}耶！@我认为这将非常有效。看起来我需要阅读块和光标标记谢谢这实际上更接近我想要做的。请注意，我必须将所有样式元素放入html中的div中，这样我才能通用地使用类标记。一旦我的工作接近尾声，我就会发布一篇文章。所以，我一直在继续这篇文章。我注意到，当我在CSS中的.image类中使用绝对定位时，我无法显示悬停图像，除了代码中添加的最后一个图像，基本上是顶部的项目。这是图像上的2.5D堆栈，因此它们从左上角显示，从右下角显示。如果未使用定位，则图像会如您所期望的那样垂直堆叠，并且悬停功能可以工作。我甚至试着为这10幅图像中的每一幅使用z索引。没有定位，所有的东西都会回到我特别定位的地方，hove仅限于顶级。