2017-04-19 51 views
0

我想激活arrowBox悬停状态,当我点击的div antrenor如何激活其他div内的div的悬停?

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

+2

的可能的复制[如何影响其他元素时一个div悬停](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-是-徘徊) –

回答

0
在这个例子中

你可以看到它是如何工作的内两种情况

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

0

如果你想点击使用jQuery或JavaScript这个

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

0

认为做将是最好的事情只是增加一类像.arrowBox--active.arrowBox当你点击.antrenor

1

$('.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>

2

当你点击 “antrenor” 添加类到您的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/

希望这有助于!

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