How can I activate the hover of a div inside of other div?

Question

I want to activate the hover state on arrowBox when I click on the div antrenor

.arrowBox:after {
  content: ' ';
  width: 0px;
  height: 0px;
  border-top: 17px solid transparent;
  border-left: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 17px solid #2391af;
  position: absolute;
  right: 104px;
  top: 50%;
  margin-top: -17px;
  opacity: 1;
  transition: 0.5s;
}

.arrowBox:hover:after {
  opacity: 1;
  right: 100%;
  top: 50%;
}

<div class="antrenor">
  <div class="arrowBox" style="margin-right:110px">Antrenor</div>
</div>

Possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — StudioTime, Apr 19 '17 at 11:04

score 2 · Answer 1 · answered Apr 19 '17 at 11:17

When you click "antrenor" add class to your div like this:

$('.antrenor').click(function () {
      $('.arrowBox').addClass('hover')
  })

The class is already defined in your CSS...

As for you original question, this has been asked before and it is not possible unfortunately. e.g. http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

However, your desired functionality may be possible if your Stylesheet is defined is Javascript. see: http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Hope this helps!

score 1 · Answer 2 · answered Apr 19 '17 at 11:11

$('.antrenor').click(function() {
  $('.arrowBox').addClass('clicked');
});

.arrowBox {
  margin-right: 110px
}
.arrowBox:after{
  content: ' ';
  width: 0px;
  height: 0px;
  border-top: 17px solid transparent;
  border-left: 17px solid transparent;
  border-bottom:17px solid transparent;
  border-right:17px solid  #2391af;
  position: absolute;
  right: 104px;
  top: 50%;
  margin-top:-17px;
  opacity: 1;
  transition: 0.5s;
}
.arrowBox.clicked:hover:after{
  opacity:1;
  right: 100%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="antrenor">
  <div class="arrowBox">Antrenor</div>
</div>

score 1 · Answer 3 · answered Apr 19 '17 at 11:28

<!DOCTYPE html>
<html lang="en">
head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .arrowBox:after{content: ' ';width: 0px;height: 0px;border-top: 17px solid transparent;border-left: 17px solid transparent;border-bottom:17px solid transparent;border-right:17px solid  #2391af;position: absolute;right: 104px;top: 50%;margin-top: -17px;opacity:1;transition:0.5s;}

    .arrowBox.animation:after{opacity:1;right: 100%;top: 50%;}        
</style>
</head>
<body>
<div class="antrenor">
  <div class="arrowBox" style="margin-right:110px">Antrenor</div> 
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script>
  $(document).ready(function(){
    $(".arrowBox").click(function(){
        $(this).addClass('animation');
    });
  });
</script>
</body>
</html>

score 0 · Answer 4 · answered Apr 19 '17 at 11:07

If you want to click use jquery or javascript for this

.arrowBox:after{content: ' ';width: 0px;height: 0px;border-top: 17px solid transparent;border-left: 17px solid transparent;border-bottom:17px solid transparent;border-right:17px solid  #2391af;position: absolute;right: 104px;top: 50%;margin-top: -17px;opacity:1;transition:0.5s;}

.arrowBox:hover:after{opacity:1;right: 100%;top: 50%;}
.antrenor:hover .arrowBox:after {
  {opacity:1;right: 100%;top: 50%;
}

<div class="antrenor">
  <div class="arrowBox"style="margin-right:110px">Antrenor</div> </div>

score 0 · Accepted Answer · answered Apr 19 '17 at 11:08

in this example you can see how it works within two situations

.antrenor .arrowBox:hover{

background-color:red;}


.antrenortwo:hover .arrowBoxtwo{

background-color:blue;}

<div class="antrenor">Antrenor
  <div class="arrowBox"style="margin-right:110px;display:inline">arrowBox</div> </div>
  
  
  <div class="antrenortwo">Antrenor
  <div class="arrowBoxtwo"style="margin-right:110px;display:inline">arrowBox</div> </div>

score 0 · Answer 6 · answered Apr 19 '17 at 11:11

0

Think the best thing to do would be just add a class like .arrowBox--active to .arrowBox when you click on .antrenor?

answered Apr 19 '17 at 11:11

Dryden Williams

1,175
14
22

How can I activate the hover of a div inside of other div?

6 Answers6