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

在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>

19日，星期四
正文

文本

---

谢谢你，一如既往

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

我也看到了至少7-10个这样的问题。。。我们是来帮你做这个项目的，伙计

为了解释为什么会发生这种情况

您将鼠标悬停状态定位为

#thursButton

，这意味着您必须将鼠标悬停在该状态上才能进行更改。一旦您将鼠标悬停在文本上，您就不再将鼠标悬停在

#thursButton

上

我所做的是在父对象上添加悬停状态，这样无论您在何处悬停，父对象都会通知子对象进行更改

这是需要改变的

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

对,

---

这里有一个问题。

问题在于元素的堆叠。您将鼠标悬停在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没有任何鼠标事件。这使得指针上的悬停仍然有效。

+1指针事件-很好。虽然IE10及以下版本不支持。哇。。。不知道指针事件。现在就开始读。谢谢你，@Sander Koedood！我知道。。。我很抱歉。我感谢你的帮助，我接受了一切。我发誓我不是在偷懒。只有当我真的陷入困境时，我才会这样做。我已经狼吞虎咽地读了两本CSS书籍，看了很多视频。无需道歉，伙计，我能给你的最好建议就是试着把所有的问题分离成一个主要问题。CSS可能很难学习，我两年前才开始学习所有这些。祝你好运，伙计，希望从现在起一切顺利。：]你是最棒的，乔希。我几个月前才开始学习CSS:-/我能问你一个问题吗？PLSSS。我不想再发一个问题，感受你的愤怒：）太晚了。。。我遇到了麻烦，得到了否决票：“（：-x我编辑了一个老问题，所以恨我

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