Question

阅读了很多可能的答案，但也许我并不那么聪明。如果可能的话，我想用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); 
}

-Thanks

Answer 1

如果我理解正确，您需要在悬停时使用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>

<强>更新忘了指定图像类的宽度，高度和位置：相对值。我为你准备了一个例子：http://jsfiddle.net/wnw1yuw5/1/

Answer 2

我不确定您究竟想要什么样的显示器，但这是您正在寻找的？

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

这是一个小提琴：http://jsfiddle.net/xu8ksvay/

当鼠标进入时，尝试使用悬停显示可点击的图像

2 个答案: