CODEWITHSUNDEEP
htmlcss
Scopo
Scopo

Reputation: 301

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>

Upvotes: 1

Views: 91

Answers (1)

norcal johnny
norcal johnny

Reputation: 2115

Updated on request: This is using exact code from OP and applying addClass to multiple <a> links with pseudo elements onHover with jquery.

https://jsfiddle.net/norcaljohnny/cz8st2fv/

You can use a addClass 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');
});

If you want to add pseudo classes there is a different approach. Simply create a new class in this case I created a.someclass and addClass on hover with jquery. Look at the last line of your css and the jquery to see what I have done. It in turn attaches to 'a'.

CSS

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

Jquery

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

Jsfiddle Demo

Upvotes: 1

Related Questions