这是我想要实现的目标:
以下是我的HTML和CSS的链接:http://www.cssdesk.com/pkVpY
非常感谢!
<div>
<i class="fa fa-file-text-o events_icon" aria-hidden="true"></i>
<a class="events_btn" href="http://www.google.org/"
target="_blank"
style="color: white; text-decoration: none;">
VIEW ALL EVENTS
</a>
</div>
答案 0 :(得分:1)
像这样更改Html,以便图标和文本都可以点击。现在的方式是,文本是可点击的,但是人们无法点击图标。
布局应该是这样的:
<a class="some-class">
<i></i> <!-- the icon -->
<span></span> <!-- the text -->
</a>
现在请记住,<div>
默认为display:block
。默认情况下,<a>
为display: inline
。您需要<a>
上的CSS规则才能使其display:block
。
您可以使用直接子选择器来影响所有孩子。
而不是.events_icon:hover {}
使用.some-class:hover>i{}
对于文字使用.some-class:hover>span{}
答案 1 :(得分:0)
假设您要将鼠标悬停在包含两个直接元素(图标+文字)的div 上,并且该悬停具有为这些项目着色的作用 >并带有特定的颜色: 选择器:
“在该.text-icon-div上悬停,带走所有直接子代并为其着色”
<!-- HTML -->
<div class = "text-iconed">
<i></i>
<a>VIEW ALL EVENTS</a>
</div>
// CSS
.text-iconed:hover > * {
color: gold //color property is applied to svg too.
}
答案 2 :(得分:-4)
在锚标记内添加您的图标元素。