悬停事件的背景颜色更改无效 [英] Background-color change on hover event not working

问题描述

我遇到了CSS悬停事件的问题。
我使用顶部的导航栏创建了一个页面。出于兼容性原因，我不得不离开导航，并将其更改为简单的div。 （导航在IE8中是未知的，但它仍然需要在那里工作。）

 < div class =nav > 
< ul> 
< li> < a取代;某些< / a> 
< ul> 
 .... 
< / ul> 
< / li> 
 .... 
< / ul> 
< / div> 
  

导致我的导航栏上的悬停不再起作用。但事实并非如此，没有任何工作，只有以下几行中的第一行不再工作了。背景根本不会改变。

  .nav ul li：hover {background：#BFBFBF; }  - 不工作
 .nav ul li：悬停>一个{color：#FFFFFF; }  - 工作完美
 .nav ul li：hover> ul {display：block; }  - 完美工作
 .nav ul {
背景：＃404040; 
 list-style：none; 
 padding：0 20px; 
保证金：0; 
 height：30px; 
 text-align：left; 
 display：block; 
} 
  

我仔细检查了我所知道的，怀疑或发现的一切，可能是我的问题的来源，但我还无法恢复工作。
我尝试使用背景颜色而不是背景，但没有成功。
我不想使用除HTML和CSS之外的任何东西，这应该是可行的，因为它在我仍然使用导航元素时起作用。

我很喜欢css，也许我错过了一些非常简单的细节。

预先感谢。

解决方案

与其修改导航栏内容，只是尝试更改指向的东西的动画，我的意思是，而不是悬停< ; li> 组件只是让文本悬停

  .nav a {
文字修饰：无; 
颜色：#fff; 
 display：block; 
 padding-left：15px; 
 border-bottom：1px solid＃888; 
过渡：.2s背景色; 
} 
 
 .nav a：hover {
 background-color：＃005f5f; 
} 
 .nav a.active {
 background-color：#aaa; 
颜色：＃444; 
 cursor：default; 
} 
  

尝试定义< a> 元素并将其悬停在整个< li> 不会悬停在多个重叠的CSS格式上

I got a problem with the CSS hover-event. I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)

<div class="nav">
 <ul>
   <li> <a> Something </a>
      <ul>
        ....
      </ul>
   </li>
   ....
 </ul>
</div>

That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.

.nav ul li:hover { background: #BFBFBF; }  - not working
.nav ul li:hover > a { color:#FFFFFF; }    - working perfectly fine
.nav ul li:hover > ul { display:block; }   - working perfect as well
.nav ul {
  background: #404040;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 30px;
  text-align:left;
  display:block;
}

I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working. I tried using background-color instead of background, without success. I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.

I am noob to css, maybe I'm missing some really simple detail.

Thanks in advance.

解决方案

Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .2s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats

这篇关于悬停事件的背景颜色更改无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！