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屋!