悬停/鼠标悬停功能冲突

Conflicting hover/mouseover functions

本文关键字：悬停 冲突 功能 鼠标      更新时间：2023-09-26

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

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

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

    <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;}

提前感谢！

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

首先

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

正如你在这里看到的 http://jsfiddle.net/UjY5Q/ 问题是父元素的不透明度，所有子元素也获得该不透明度。

.rightbox:hover {
    opacity:0.5;
}

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

因此，获取所需内容的最简单方法是在：悬停上显示透明背景图像示例： http://jsfiddle.net/UjY5Q/1/

我会说这是要走的路

相关文章：