按钮在鼠标悬停上移动

Question

我的菜单按钮每当我用鼠标悬停在它们上方时都会出现问题。一旦我完成了，他们全部到位。当我按下F5来重新显示页面时，按钮已经就位。这个问题在IE8中不会发生。我正在使用Chrome（已更新）。

CSS：

div.header_container 
{ 
    clear: both; 
    float: left; 
    height: 180px; 
    width: 100%; 
} 

div.header 
{ 
    margin-top: 54px; 
    height: 110px; 
    background-color: #000000; 
    width: 100%; 
} 

div.logo 
{ 
    float: left; 
    margin-top: 23px; 
    margin-left: 5px; 
} 

div.menu 
{ 
    float: right; 
    margin-top: 58px; 
    margin-right: 10px; 
} 

div.menu ul 
{ 

} 

div.menu ul li 
{ 
    float: left; 
    margin-left: 30px; 
    padding-right: 10px; 
    list-style-image:url("../images/menu_block.jpg"); 
} 

div.menu ul li:hover 
{ 
    list-style-image:url("../images/menu_block_mo.png"); 
} 

div.menu ul li a 
{ 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 16px; 
    font-family: 'CalibriRegular'; 
} 

HTML：

 <div class="wrapper"> 
    <div class="header_container"> 
     <div class="header"> 
      <div class="logo"> 
       <a href="#" title="Video Photo Editing Graphics | Stefanvlemmix.nl"><img src="images/logo.png" /></a> 
      </div> 
      <div class="menu"> 
       <ul> 
        <li><a href="./index.html">Start</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="./projects.html">Projects</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </div> 

任何想法，我做错了吗？

Answer 1

男人，

您在HOVER上使用另一个图像。悬停图像最初没有加载，当你将鼠标悬停在它上面时 - 然后它开始加载，因此你在第一次悬停时有这种转变。

您应该使用CSS Sprite来克服这些类型的问题。

EDIT

OR，使用HTML字符和该CSS产生的内容（:after, :before）。只需更改悬停时的颜色即可。

所有你需要：

div.menu ul li 
{ 
    float: left; 
    margin-left: 30px; 
    padding-right: 10px; 
    list-style:none; 
} 

.menu li:before { 
    display:inline-block; 
    content: "\25A0"; 
    color:white; 
    font-size:20px; 
    margin-right:5px; 
} 

div.menu ul li:hover:before 
{ 
    color:red; 
} 

而完成的。看到这里：http://jsfiddle.net/shekhardesigner/vQjMX/