Question

在Stackover之前的帮助下，我制作了一个显示一周中几天的悬停菜单。当您将鼠标悬停一天时，会在图像上方显示文字。我已经做到了这一点。但是，现在我的问题是：当你将鼠标悬停在文本上时，它后面的悬停图像就会消失。

我想也许这是一个可以使用z-index修复的问题，但这不起作用。

这是我的CSS

#nav {
display:inline;
list-style:none;
position:fixed;
width:1290px;
margin:0 auto; 
left:0px; 
right:0px;
float:clear;
top:130px;
z-index:1000;

}

.menu li {
display:inline;
vertical-align:top; 
float:left;

}

.menu li a {
display:block;
height:407px;
width:250px;

}

.img1 {
width:250px;
height:407px;
position:relative;
}

.thursButton {
width:250px;
height:407px;
display:block;
}

#thursButton {
background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

#thursButton:hover {
background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}
.left p {
color:#FFFFFF;
display:none;
font-size:20px;
left:5px;
position:absolute;
text-shadow:1px 1px 1px #000000;
text-transform:uppercase;
top:100px;
width:245px;
 white-space: pre-line;
word-wrap: break-word;


}

.left:hover p {
display:block;

}

HTML

<div id="nav"> <div style="display:inline-block;white-space: nowrap">
<ul class="menu">
    <li>
        <div class="img1 left"> <a href="#" id="thursButton" class="thursButton" border="0"></a>

            <p><u>Thursday, 19th</u>
Text
<br/>Text
            </p>
        </div>
    </li>
    <li>

            </p>
        </div>
    </li>

谢谢Stackoverflow，一如既往！

Answer 1

您需要更改激活悬停的内容。

我也至少看过7-10个这样的问题......我们在这里是为了帮助你不为你的伴侣做项目。

要解释为什么会这样，

您的目标是#thursButton用于悬停状态，这意味着您必须将鼠标悬停在该状态才能进行更改。将鼠标悬停在文字上方后，您将不再悬停在#thursButton上方。

我所做的是在父母身上添加悬停状态，所以无论你在哪里徘徊，父母都会通知孩子进行更改。

这是需要改变的，

#thursButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

要，

.img1:hover #thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

这是JSFIDDLE。

Answer 2

问题在于堆叠元素。你把悬停放在a上，但当你悬停文字时，你不再盘旋具有背景的a。

Josh的答案非常好，但是，您也可以使用指针事件来解决它。

更改以下CSS：

.left p {
   color: #FFFFFF;
   display: none;
   font-size: 20px;
   left: 5px;
   position: absolute;
   text-shadow: 1px 1px 1px #000000;
   text-transform: uppercase;
   top: 100px;
   width: 245px;
   white-space: pre-line;
   word-wrap: break-word;
   pointer-events: none;
}

这将导致p没有任何鼠标事件。这使得悬停在一个仍然有效。

悬停背景图像消失在文本后面

2 个答案: