Foxwells Foxwells - 29 days ago 8
CSS Question

Make 2 Links Appear Selected at the Same Time

so I have 2 links that both link to the same thing and are even just on separate lines. However, because of the formatting I use for links, I had to break it in two. Now it just looks wonky when you hover on one and it doesn't highlight the other... So if there's a way to make the other "selected" (or well, hovered on), could you share?

Here's my code:

(I'm aware that the link colour has garbage contrast with its background. I'm going to fix it later once I have this all fixed up. I'm also aware that clicking the link gives an error. I didn't add in the JavaScript for them)



.linko {
font-size: 12px;
font-family: arial;
text-align:center;
position: relative;
height: 41px;
width: 65px;
margin: 2px 0px 2px 25px;
display: inline-block;
vertical-align: top;
background-color: #69A373;
border-radius: 7px;
}

a:link,
a:visited,
a:active {
position: relative;
display: inline-block;
text-decoration: none;
border-bottom: 1px dashed #3C654D;
color: #3C654D;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

a:hover {
color: #163A29;
text-decoration: none;
border-bottom: 1px dashed transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

a:before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}

a:after {
content: '';
display: block;
height: 1px;
width: 0px;
background: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

a:hover:before,
a:hover:after {
width: 100%;
background-color: #163A29;
}

<div class="linko">
<a style="position:relative;top:4px;display:inline-block;" href="javaScript:void(0);" onClick="load_alerts();">Alerts</a>
<br />
<a style="position:relative;display:inline-block; margin-top:5px;" href="javaScript:void(0);" onClick="load_alerts();">(2)</a>
<div style="display:none;" id="recent-alerts">
<div class="tableborder">
<div class="pformstrip">Recent Alerts
<div style="float: right;"><a href="javascript:document.getElementById('recent-alerts').style.display='none';void(0);">[x]</a>
</div>
</div>

<span id="recent-alerts-data"></span>
<div style="text-align: center;" class="pformstrip">
<a title="View All Alerts" href="http://pjonline.tk/index.php?act=UserCP&amp;CODE=alerts">View All Alerts</a> ยท <a title="Mark All Read" href="javascript:read_alerts();">Mark All Read</a>
</div>
</div>
</div>
</div>




Answer

You can use a toggle class to effect the links in many ways. Here is a sample using background on all 'a' links.

https://jsfiddle.net/norcaljohnny/9gru7Lmx/

$('a').hover(function(){
    $('a').addClass('active');
},function(){
    $('a').removeClass('active');
});
Comments