javascript - 冲突的悬停/鼠标悬停功能

Question

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

问题是，我想让它们一起工作，而不会让这个文本失去不透明度，当图像/框属于同一个 div 类时，它就会失去不透明度。但是，当我尝试使用两个单独的 div 类并将它们放在彼此之上(使用 z-index)时，我放在上面的任何一个似乎都挡住了另一个。有什么办法可以让图像/框失去不透明度，但出现的文本不会，所有这些都在同一个鼠标悬停/悬停 Action 中？

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

.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，其中第四个值是不透明度)，因此它使图像变暗。如果您愿意，可以将图像设为 .box 的 background-image。

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