Question

我想点击div arrowBox

时激活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>

Answer 1

当您点击“antrenor”时，将div添加到您的div中：

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

该类已在CSS中定义...

至于你原来的问题，之前已经提出过这个问题，不幸的是不可能。例如http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

但是，如果您定义的样式表是Javascript，则可以使用所需的功能。见：http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

希望这有帮助！

Answer 2

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

 var url = $("#allUrls").data('request-url-save');
       alert(url); // set this url in your AJAX call

Answer 4

如果你想点击使用jquery或javascript这个

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 5

在这个例子中，您可以看到它在两种情况下的工作原理

.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>

Answer 6

认为最好的办法就是在点击.arrowBox--active时向.arrowBox添加.antrenor这样的课程？

如何在其他div中激活div的悬停？

6 个答案: