<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>
I want the links with the class unlinked
to not have the underline when a link is hovered over. I tried:
.unlinked {
color: gray;
font-weight: normal;
text-decoration: none;
}
This doesn't seem to work, mainly because my unlinked
class should be a
class. However, I don't want to remove the underlining for all my links, just the unlinked
class.
Turn your span
s into block level elements and then to this:
.shared_link_name {
display: inline-block;
text-decoration: underline;
}
.shared_link_name:hover {
text-decoration: none;
}
Use the below code:
.unlinked {
display: inline-block;
color: gray;
font-weight: normal;
text-decoration: underline;
}
/* For hover condition */
.unlinked:hover {
text-decoration: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.