css - 试图在鼠标进入时使用悬停显示可点击的图像

Question

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

这是我正在尝试做的事情:机器的图像显示在 div 内的页面上。悬停时，我想要显示图像的可点击突出显示版本。

我还希望其他信息文本和图像使用淡入标签变得可见。当鼠标退出图像时，我希望突出显示的版本和其他图像和文本再次不可见。我需要使用 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); 
}

-谢谢

Answer 1

我不确定您想要什么样的显示器，但这是您要找的吗？

.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 -->

这是一个 fiddle :http://jsfiddle.net/xu8ksvay/