如何激活其他div內的div的懸停？

我想激活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>

來源

2017-04-19 Bogdan

的可能的複製[如何影響其他元素時一個div懸停]（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-是-徘徊） –

在這個例子中

你可以看到它是如何工作的內兩種情況

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

來源

2017-04-19 11:08:58

如果你想點擊使用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>

來源

2017-04-19 11:07:31 LKG

認爲做將是最好的事情只是增加一類像.arrowBox--active到.arrowBox當你點擊.antrenor？

來源

2017-04-19 11:11:20

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

來源

2017-04-19 11:11:53

當你點擊「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/

希望這有助於！

來源

2017-04-19 11:17:23

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

來源

2017-04-19 11:28:04

如何激活其他div內的div的懸停？

回答

相關問題