CODEWITHSUNDEEP
htmlcsshover
user3232801
user3232801

Reputation: 113

Mouse hover triggers hover on itself and another div

I am trying to set something up where when someone hovers over .twitter-underline-1 it triggers the :hover for that class AND the :hover for the #twitter-1 id

vice verse

When someone hovers over #twitter-1 it triggers the :hover for that id AND the :hover for the .twitter-underline-1 class

I tried some recommended solutions from other who asked a similar question but nothing fully worked. Can anyone point me in the right direction?

.twitter-underline-1 {
  border-bottom: 1px dotted #E0E0E0;
}
.twitter-underline-1:hover {
  border-bottom: 1px solid #4099FF;
}
#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}
#twitter-1:hover {
  color: #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span class="twitter-underline-1">Blah blah text</span>

<div class="twitter">
  <span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
</div>

Upvotes: 2

Views: 142

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

demo - http://jsfiddle.net/3855n719/

$('#twitter-1').hover(
  function() {
    $('.twitter-underline-1').addClass('hover');
  },
  function() {
    $('.twitter-underline-1').removeClass('hover');
  }
);

Upvotes: 1

ckuijjer
ckuijjer

Reputation: 13814

It can't be done without changing your html structure as it is impossible to select a previous element in css.

I think you have two options:

  1. Surround it with a .twitter-container and add the :hover class there. This might only be an option if you don't have any other content between the .twitter-underline and #twitter-1 as hovering over them would also add the styling.

  2. Move the .twitter-underline element in the html below the #twitter-1, select it with a sibling selector like + or ~ and use position: absolute to put it back in its proper place.

Example for method 1

.twitter-underline-1 {
  border-bottom: 1px dotted #E0E0E0;
}

#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}

.twitter-container:hover .twitter-underline-1 {
  border-bottom: 1px solid #4099FF;  
}

.twitter-container:hover #twitter-1 {
  color: #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="twitter-container">
  <span class="twitter-underline-1">Blah blah text</span>

  <div class="twitter">
    <span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
  </div>
</div>

Example for method 2

.twitter-container {
  position: relative;
  padding-top: 1em;
}
.twitter-underline-1 {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px dotted #E0E0E0;
}
#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}
#twitter-1:hover {
  color: #4099FF;
}
#twitter-1:hover + .twitter-underline-1 {
  border-bottom: 1px solid #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="twitter-container">
  <div class="twitter">
    <span title="Click to Tweet">
      <i id="twitter-1" class="fa fa-twitter"></i>
      <span class="twitter-underline-1">Blah blah text</span>
    </span>
  </div>
</div>

Upvotes: 0

Related Questions