Javascript 悬停/鼠标悬停功能冲突

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

问题是，我想让它们一起工作，而不会使文本失去不透明度，这在作为image/box的同一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类。）

---

提前谢谢

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

正如您在这里所看到的的问题是父元素的不透明度，所有子元素也会获得该不透明度

.rightbox:hover {
    opacity:0.5;
}

通过设置元素的位置并将一个元素与另一个元素重叠，可以在这一点上作弊。这有点棘手，可能还需要浏览器支持

因此，获取所需内容的最简单方法是：悬停显示透明背景图像示例：

---

我想说的是，这是一种方法。首先，尽量避免内联事件处理，因为使用css:hover可以获得所需的结果

正如您在这里所看到的的问题是父元素的不透明度，所有子元素也会获得该不透明度

.rightbox:hover {
    opacity:0.5;
}

通过设置元素的位置并将一个元素与另一个元素重叠，可以在这一点上作弊。这有点棘手，可能还需要浏览器支持

因此，获取所需内容的最简单方法是：悬停显示透明背景图像示例：

---

我想说的是，这是一条路

正如上面的一位评论者所指出的，您可以完全使用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>

* {
填充：0；
保证金：0；
}
.盒子{
宽度：250px；
高度：250px；
溢出：隐藏；
}
.box img{
宽度：250px；
高度：250px；
}
.盒子.留言{
背景：rgba（0,0,0,0.5）；
不透明度：0；
宽度：250px；
高度：250px；
位置：相对位置；
顶部：-256px；
颜色：#fff；
字体大小：32px；
线高：250px；
文本对齐：居中；
字体大小：粗体；
字体系列：arial；
}
.box.消息：悬停{
不透明度：1；
}
南极洲

.message

位于容器的顶部，

.box

。当您将鼠标悬停在

.message

上时，它将从0不透明度淡入。它的背景是半透明的（使用RGBA，其中第四个值是不透明度），因此会使图像变暗。如果愿意，您可以将该图像设置为

.box

的

背景图像

正如上面的一位评论者所指出的，完全可以通过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>


* {
填充：0；
保证金：0；
}
.盒子{
宽度：250px；
高度：250px；
溢出：隐藏；
}
.box img{
宽度：250px；
高度：250px；
}
.盒子.留言{
背景：rgba（0,0,0,0.5）；
不透明度：0；
宽度：250px；
高度：250px；
位置：相对位置；
顶部：-256px；
颜色：#fff；
字体大小：32px；
线高：250px；
文本对齐：居中；
字体大小：粗体；
字体系列：arial；
}
.box.消息：悬停{
不透明度：1；
}
南极洲

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

您是否考虑过在CSS中使用：hover语法？你们试图用事件来完成的事情应该用CSS来完成。作为旁注：你们可能应该避免内联事件和样式的东西。它更难维护，也不容易阅读。你有没有考虑过在CSS中使用：hover语法？你们试图用事件来完成的事情应该用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>