更改li上的背景图像a：hover [英] change background image of li on an a:hover

问题描述

我有一个菜单：

 < div id = menu& 
< ul = navigation> 
< li>< a href =>首页< / a>< / li> 
< / ul> 
< / div> 
  

使用滑动门技术，我想创建我的按钮（底部包含圆角） / p>

我可以让这个工作，通过悬停a和李。但是李是更大的，如果我悬停在李，没有悬停的一个，只有李的背景图像显示。

现在我想知道是否有一种方法来连接li的悬停和css内的a悬停。我宁愿解决这个问题，而不使用javascript。

Googleing没有进一步帮助我。我猜这是不可能的，但我想在尝试其他选项之前确定。

先感谢任何建议/帮助/建议。 >

解决方案

根据我收集的资料，你不能以你描述的方式做你以后的事情。

然而，我会做的是使a标签显示为块，并设置宽度和高度填充LI这样你可以使用：hover和更改整个bg，它看起来像LI正在改变

 
  
 li a {
 background：＃000 url images / bg.png）no-repeat 0 0; 
 display：block; 
 height：20px; 
 width：100px; 
} 
 li a：hover {
 background：#fff url（images / bg.png）no-repeat 0 -20px; 
} 
  
 

也使用一些填充将文本放在正确的位置，并从LI中删除任何填充

li：在旧版本的IE中不支持hover而不使用JS，因此使用：hover跨浏览器兼容性

I have a menu:

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)

I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.

Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.

Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.

Thanks in advance for any advice/help/suggestions.

解决方案

From what I gather you cannot do what you are after in the way you have described it.

However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing

li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"

li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability

这篇关于更改li上的背景图像a：hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！