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

Question

在 Stackover 之前的帮助下，我制作了一个显示星期几的悬停菜单。当您将鼠标悬停在一天上时，会出现一个图像，上面有文字。我已经做到了。但是，现在我的问题是:当您将鼠标悬停在文本上时，它后面的悬停图像消失了。

我想也许这是一个可以使用 z-index 解决的问题，但没有用。

我做了一个 JSfiddle

这是我的 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 .