Question

相对新手在这里。我有两个不同的鼠标悬停/悬停功能我可以正常工作：一，内联鼠标悬停，通过使图像/盒子失去不透明度来“变暗”;第二个，悬停在此图像/框上方的文本（从隐藏位置向上跳跃）。

问题是，我希望让它们一起工作，而不会让这个文本失去不透明度，它与图像/盒子相同的div类的一部分。但是当我尝试两个单独的div类并将它们放在彼此之上时（使用z-index），无论我放在顶部的哪一个似乎都阻止了另一个。是否有任何方法可以使图像/框失去不透明度，但出现的文本没有，都在同一个鼠标悬停/悬停动作中？

这些是我的样式表中的相关位，主要涵盖文本部分：

.rightbox { 

background: rgb(140, 183, 98); 
width: 290px; 
height: 160px; 
margin-bottom: 18px; 
padding: 2px;}

.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;

}

.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}

.rightboxtext:hover span {
height: 80px;
}

这是我使用的内联内容，其中包括文本在内的所有内容都获得了不透明度处理。（在这种情况下，图像附加到rightboxtext div类，但我也尝试将它附加到rightbox div类。）

    <div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>

否则我实现了这个错误的代码，其中一个似乎阻止了另一个：

<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>

使用样式表中的这个额外位：

.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}

提前致谢！

Answer 1

作为一名评论者，您可以完全使用CSS：

<style>
* {
    padding: 0;
    margin: 0;
}

.box {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.box img {
    width: 250px;
    height: 250px;
}

.box .message {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 250px;
    height: 250px;
    position: relative;
    top: -256px;
    color: #fff;
    font-size: 32px;
    line-height: 250px;
    text-align: center;
    font-weight: bold;
    font-family: arial;
}

.box .message:hover {
    opacity: 1;
}
</style>
<div class="box">
    <img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
    <div class="message">Antarctica</div>
</div>

.message位于容器顶部.box。当您将鼠标悬停在.message上时，它会从0不透明度淡入。它的背景是半透明的（使用RGBA，其中第四个值是不透明度），因此它使图像变暗。如果您愿意，可以将图片设为background-image的{{1}}。

http://jsfiddle.net/dgGG3/4/

Answer 2

首先，尝试避免内联事件处理，因为您可以使用css：hover获得所需的结果。

您可以在此处看到的问题 http://jsfiddle.net/UjY5Q/ 在父元素上具有不透明度，所有子元素也会获得不透明度。

.rightbox:hover {
    opacity:0.5;
}

你可以通过设置元素的位置并将它们重叠到另一个元素来欺骗那个元素。这有点棘手，也可能需要浏览器支持。

所以最简单的方式来获得你想要的东西：悬停在这里显示一个透明的背景图片示例： http://jsfiddle.net/UjY5Q/1/

我会说这是要走的路

悬停/鼠标悬停功能冲突

2 个答案: