IE中的CSS悬停问题 [英] CSS Hover Problem in IE
问题描述
您好，
我在IE中遇到css悬停效果问题。我有一个带有以下CSS的< a>
标记：
a.subNavItem {
display：block;
颜色：＃464645;
填充：2px 7px 4px 6px;
font-family：verdana，arial，helvetica，sans-serif;
字体大小：9px;
font-weight：bold;
text-decoration：none;
宽度：继承;
border-bottom：1px solid＃C8CBC7;
white-space：nowrap;
}
< atag的宽度继承自其父div，因此
边框和悬停效果将跨越整个div。
这里是悬停css：
a.subNavItem：悬停
{
颜色：＃00A5E5;
text-decoration：none;
background-color：＃F5F8F4;
}
这是HTML：
< div style =" width：400px">
< a href =" dir" class =" subNavItem"> click< / a>
< / div>
问题：
在IE中，悬停效果仅在我将鼠标悬停在文本本身上时才有效。
因此，即使< atag为400px宽，只有当你使用悬停时，悬停才有效$ b鼠标悬停在点击上。在Firefox中，我可以将鼠标悬停在跨越div宽度的
< atag内的任何位置，并且我的悬停更改
工作正常。我不想将我的所有< atags更改为< div> ;.
有没有人知道这个的解决方案？
Hello,
I''m having a problem with the css hover effect in IE. I have an <a>
tag with the following CSS:
a.subNavItem {
display:block;
color:#464645;
padding:2px 7px 4px 6px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:9px;
font-weight:bold;
text-decoration:none;
width:inherit;
border-bottom:1px solid #C8CBC7;
white-space:nowrap;
}
The width of the <atag inherits from its parent div so that the
border and hover effect will span across the entire div.
Here''s the hover css:
a.subNavItem:hover
{
color:#00A5E5;
text-decoration:none;
background-color:#F5F8F4;
}
Here is the HTML:
<div style="width:400px">
<a href="dir" class="subNavItem">click</a>
</div>
THE PROBLEM:
In IE, the hover effect only works when I mouse over the text itself.
So even though the <atag is 400px wide, the hover only works if you
mouse over "click". In Firefox, I can mouse over anywhere inside the
<atag that spans across the width of the div, and my hover changes
work fine. I don''t want to change all of my <atags to <div>.
Does anyone know a solution to this?
推荐答案
fehays写道：
fehays wrote:
我遇到了问题IE中的css悬停效果。
I''m having a problem with the css hover effect in IE.
a {width：100％; }
a { width: 100%; }
10月6日下午4:35，Andy Dingley < ding ... @ codesmiths.comwrote：
On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
fehays写道：
fehays wrote:
我是IE.a中的css悬停效果有问题{width：100％; }
I''m having a problem with the css hover effect in IE.a { width: 100%; }
Andy，
你是对的，这可以用我发布的代码，但是，我尝试了
来简化我的执行代码，这样做，我犯了一个错误。
HTML看起来像这样：
< div>
< a href =" dir" class =" subNavItem"> click< / a>
< / div>
因此父< divdoes没有设置宽度。这是因为我希望
将div扩展为文本。
因此，使用您的解决方案，如果我将100％宽度添加到< ait延伸出来
超出父母< div>
任何想法？
谢谢。
Andy,
You''re right, that would work with the code I posted, however, I tried
to simplify my actuall code and in doing so, I made a mistake.
The HTML looks like this:
<div>
<a href="dir" class="subNavItem">click</a>
</div>
So the parent <divdoes not have a width set. This is because I want
the div to just expand with the text.
So, with your solution, if I add 100% width to the <ait stretches out
beyond the parent <div>
Any ideas?
Thanks.
fehays写道：
fehays wrote:
10月6日下午4:35，Andy Dingley < ding ... @ codesmiths.comwrote：
On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesmiths.comwrote:
> fehays写道：
>fehays wrote:
> >我在IE.a中遇到了css悬停效果问题{width：100％; }
>>I''m having a problem with the css hover effect in IE.a { width: 100%; }
Andy，
你是对的，这可以用我发布的代码，但是，我尝试了
来简化我的执行代码，这样做，我犯了一个错误。
HTML看起来像这样：
< div>
< a href =" dir" class =" subNavItem"> click< / a>
< / div>
因此父< divdoes没有设置宽度。这是因为我希望
将div扩展为文本。
因此，使用您的解决方案，如果我将100％宽度添加到< ait延伸出超过父母< div>的
Andy,
You''re right, that would work with the code I posted, however, I tried
to simplify my actuall code and in doing so, I made a mistake.
The HTML looks like this:
<div>
<a href="dir" class="subNavItem">click</a>
</div>
So the parent <divdoes not have a width set. This is because I want
the div to just expand with the text.
So, with your solution, if I add 100% width to the <ait stretches out
beyond the parent <div>
不，它不是，父div也是其父母的100％。
而不是宽度，你可以使用高度太。如果您确定链接文本
不会换行，您可以设置1.2em的高度。
但是你仍然需要如果你不想要它的宽度设置一个限制
占用其父母的全部可用宽度。
-
Els http://locusmeus.com/
可访问的网页设计： http://locusoptimus.com/
现在播放：各种 - Nebukadnezar
No it doesn''t, the parent div is also 100% of its parent.
Instead of width, you can use height too. If you''re sure the link text
won''t wrap, you can set a height of 1.2em for example.
But you''ll still need to set a limit on the width if you don''t want it
to take up the full available width inside its parent.
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Various - Nebukadnezar
这篇关于IE中的CSS悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
