html - 当链接悬停在某些链接上时如何删除下划线？

Question

HTML

<div class = "shared_link_post_container">
    <a id="{{post.status_id}}_shared_link_img" href="{{post.link}}" target="_blank">
        <img src="{{post.picture}}">
    </a>
    <a id="{{post.status_id}}_shared_link_text" class="shared_link_text" href="{{post.link}}" target="_blank">
        <div id="{{post.status_id}}_clickable_text_box" class="clickable_text_box">
            <br>
            <span class="shared_link_name">{{post.name}}</span>
            <br>
            <span class="unlinked shared_link_caption">{{post.caption}}</span>
            <br>
            <br>
            <span class="unlinked shared_link_description">{{post.description}}</span>
        </div>
    </a>
</div>

unlinked当链接悬停在上面时，我希望类的链接没有下划线。我试过了：

CSS

.unlinked {
    color: gray;
    font-weight: normal;
    text-decoration: none;
}

这似乎不起作用，主要是因为我的unlinked班级应该是a班级。但是，我不想删除所有链接的下划线，只删除unlinked类。

Answer 1

把你span的 s 变成块级元素，然后变成：

.shared_link_name {
  display: inline-block;
  text-decoration: underline;
}
.shared_link_name:hover {
  text-decoration: none;
}

代码笔在这里

Answer 2

使用以下代码：

演示 JSFIDDLE

.unlinked {
     display: inline-block;
     color: gray;
     font-weight: normal;
     text-decoration: underline;
}

/* For hover condition */
.unlinked:hover {
     text-decoration: none;
}