图片悬停不working..on纯CSS

<div id="headermenu"> 
    <ul > 
     <li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li> 
     <li id="menu2"><a href="#"><img src="images/menu2.png"/></a> 
      <ul class="submenu2"> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
       <li><a href="#">submenu2</a></li> 
      </ul> 
     </li>   
     <li id="menu3"><a href="#"><img src="images/menu3.png" /></a></li> 
     <li id="menu4"><a href="#"><img src="images/menu4.png"/></a></li> 
     <li id="menu5"><a href="#"><img src="images/menu5.png"/></a></li> 
    </ul> 
</div>

CSS图片悬停不working..on纯CSS

#headermenu ul ul { 
    display: none; 
} 
#headermenu ul{ 
    padding:0; 
    margin:0; 
    white-space:nowrap; 
} 
#headermenu ul li{ 
    width: 20%; 
    list-style-type:none; 
    display:inline-block; 
    margin-bottom:15px; 
    float:left; 
    left:0; 
} 
#menu1:hover{ 
    background: url('images/menu1hover.png'); 
}

悬停不工作，我不知道如何使图像悬停名单，我也想知道如何使一个子列表当李某悬停时。如果在子列表上有另一个列表如何使它..在纯CSS ..

来源

2014-07-21 Giant

''将坐在背景图像的顶部。 – Ruddy

@Ruddy你的意思是坐什么？当我悬停图像不会改变 – Giant

它确实，但你不能看到它。背景图像是......背景，无论坐在背景上面，都会掩盖它。（这是如果'img'占用了所有'li'）。 – Ruddy

由于您没有给我们提供所有我们需要解决的信息，我会猜测。正如我在评论中所说的那样。这可能是由于<img>坐在背景上造成的，所以当你悬停时，你根本看不到背景。

HTML：

<div id="headermenu"> 
    <ul> 
     <li id="menu1"><a href="#"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/></a> 
     </li> 
    </ul> 
</div>

CSS：

#headermenu ul ul { 
    display: none; 
} 
#headermenu ul { 
    padding:0; 
    margin:0; 
    white-space:nowrap; 
} 
#headermenu ul li { 
    width: 20%; 
    height: 50px; 
    list-style-type:none; 
    display:inline-block; 
    margin-bottom:15px; 
    float:left; 
    overflow: hidden; 
    border: 1px solid; 
} 
#menu1:hover { 
    background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'); 
}

这里是你的代码，背景图像被改变，但因为前面的<img>不能被看到。

DEMO HERE

现在这里是相同的代码，但是要删除的<img>。

<div id="headermenu"> 
    <ul> 
     <li id="menu1"><a href="#"></a> 
     </li> 
    </ul> 
</div>

DEMO HERE

我们可以看到，悬停的工作，但在<img>被拱起来。

解决方案：

只需简单地悬停时，将设置在每一个li背景，然后一个背景。

CSS：

#menu1 { 
    background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'); 
} 
#menu1:hover { 
    background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg'); 
}

DEMO HERE

您也可以悬停时将显示器设置为无为img。

CSS：

#menu1 { 
    background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'); 
} 
#menu1:hover img { 
    display: none; 
}

DEMO HERE

还有更多的方法，但这些是两个，将工作。

来源

2014-07-21 08:23:09 Ruddy

感谢您解释这个问题是否有解决我的代码或没有工作？有没有办法让悬停图像通过img？ – Giant

你能告诉我怎么样吗？ – Giant

@HakHak是的，有围绕它的方法。正如评论中的某个人所建议的，更简单的方法是在CSS中获取背景，然后让悬停改变背景。 [DEMO]（http://jsfiddle.net/9fahD/2/） – Ruddy

您需要使用背景图像，或实际的img状态之前和之后。在你的例子中，当鼠标悬停在＃menu1上时，menu1.png图像背后的背景被改变，但是menu1.png从视图中遮挡它。

来源

2014-07-21 08:23:00 number8pie

试试这个代码
DEMO

<body> <a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"></a> </body> 


.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }

来源

2014-07-21 08:27:03

图片悬停不working..on纯CSS

回答

相关问题