CODEWITHSUNDEEP
jqueryhtmlcss
Gustavo Siqueira
Gustavo Siqueira

Reputation: 3

How can I apply hover styles to a div when I hover another element?

What I want is to activate the hover also when I hover the mouse in the name (.teste), however I wanted to do this with jQuery.

li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li .hover:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}
<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

Upvotes: 0

Views: 66

Answers (4)

Extranion
Extranion

Reputation: 608

Without any javascript. Just change the "li .hover:hover" to "li:hover .hover" if you don't like it to set it on the whole li element just create a container element that holds the elements you want to hover.

I always recommend the non-js above the js method. But if you want really go with the jquery option I recommend the solution with the class change from Aquila Sagitta.

li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li:hover .hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}

.hover.active {
  background-color: #72adde;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

Upvotes: 0

greatgumz
greatgumz

Reputation: 418

This will probably be better handled in CSS like you have done for your .hover class, but if it needed to be done in JavaScript or jQuery you can use the .hover() jQuery mouse event https://api.jquery.com/hover/

$(".teste").hover(function() {
  $(this).css("color", "red"); // or anything you want to trigger on your hover event
});

Upvotes: 0

flyer
flyer

Reputation: 1424

Try this - using jquery's hover method:

$('.teste').hover(function() {
  $('.hover').addClass('active');
}, function() {
  $('.hover').removeClass('active');
});
li .caixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #9d9d9d;
  border-radius: 10px;
  box-sizing: border-box;
  height: 210px;
  width: 210px;
  position: relative;
}

li .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: .3s;
}

li .hover a,
span {
  display: none;
}

li .hover:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #72adde;
  opacity: 0.8;
}

.hover.active {
  background-color: #72adde;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="caixa">
    <img src="" alt=""><i class="flaticon-people"></i>

    <div class="hover">
      <a class="branco" href="">Ver Perfil </a>
      <span class="branco"> |</span>
      <a class="preto" href=""> Editar</a>
    </div>
  </div>
  <p><a class="teste" href="">Leona Lima</a></p>
</li>

Upvotes: 1

Aquila Sagitta
Aquila Sagitta

Reputation: 448

Could toggle the css when hovering over link.

$('.teste').hover(function() { // mouseEnter callback
  // do whatever to box
}, function() { // mouseExit callback
  // undo whatever to box
});

a better solution might be to make another class to apply background color directly.

// css
.changeBackground {
  background-color: #72adde;
  opacity: 0.8;
}

$('.teste, .hover').toggleClass('.changeBackground');

Upvotes: 0

Related Questions