1

这里的相对新手。我有两个不同的鼠标悬停/悬停功能，我可以很好地工作：一个，一个内联鼠标悬停，通过使其失去不透明度来“变暗”图像/框；第二，悬停时出现在此图像/框上的文本（从隐藏位置跳起）。

问题是，我想让它们一起工作，而不会使文本失去不透明度，这在与图像/框相同的 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;}

提前致谢！

4

2 回答 2

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如果你愿意，你可以制作图像.box。

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

于 2013-10-18T21:08:31.273 回答
0

首先，尽量避免内联事件处理，因为您可以使用 css :hover 实现所需的结果。

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

.rightbox:hover {
    opacity:0.5;
}

您可以通过将位置设置为元素并将一个与另一个重叠来欺骗该元素。这有点棘手，可能还需要浏览器支持。

所以得到你想要的最简单的方法是：悬停在这里显示一个透明的背景图像示例：http: //jsfiddle.net/UjY5Q/1/

我会说这是要走的路

于 2013-10-18T21:07:27.357 回答