Question

我有一个水平列表，下面有图标和文字链接。

我想要实现的是在将鼠标移到它上面时更改图标链接的颜色和文本链接的颜色。到目前为止，我只改变其中一个，而不是两个，即使它们都在同一个“a”中。当鼠标在文本链接上移动时，文本链接会更改颜色，但图标链接不会。

我做错了什么？

这是HTML：

<ul class="glyphs character-mapping">
                <li>
                <a href="" class="iconlink">
                  <div data-icon="a" class="icon"></div>Link 1</a>
                </li>
                <li>
                <a href="" class="iconlink">
                  <div data-icon="b" class="icon"></div>Link 2</a>
                </li>
</ul>

CSS：

.glyphs.character-mapping {
margin: 0px;
padding: 0px;
color: rgba(0, 0, 0, 0.5);
}
.glyphs.character-mapping li {
margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;
}
.glyphs.character-mapping .icon {
margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #162A36 !important;
overflow: hidden;
border-radius: 3px;
font-size: 60px; 
}
.glyphs.character-mapping .iconlink:hover{
color: #FF0000 !important;
}

Answer 1

试试这个：

.glyphs.character-mapping .iconlink:hover,
.glyphs.character-mapping .icon:hover {
color: #FF0000 !important;
}

HTML指定<a>元素只能包含内联元素。 <div>是一个块元素，因此它可能不会显示在<a>内。

那么为什么不使用代码i代替div

<ul class="glyphs character-mapping">
    <li>
        <a href="" class="iconlink">
            <i data-icon="a" class="icon"/>Link 1
        </a>
    </li>
    <li>
        <a href="" class="iconlink">
            <i data-icon="b" class="icon"/>Link 2
        </a>
    </li>
</ul>

更改图标的颜色以及div内部链接的颜色？

1 个答案: