當我懸停另一個元素時，如何將懸停樣式應用於div？

Question

我想要的是當我將鼠標懸停在名稱（.teste）中時激活懸停，但是我想用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>

Answer 1

試試這個 - 使用jQuery的懸停方法：

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

Answer 2

懸停在鏈接時能切換CSS。

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

更好的解決方案可能是讓另一個類直接應用背景顏色。

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

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

Answer 3

這可能會在CSS來更好地處理像你做你的.hover類，但如果它需要在JavaScript或jQuery中完成，你可以使用.hover() jQuery鼠標事件https://api.jquery.com/hover/

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

Answer 4

沒有任何javascript。只要將「li .hover：hover」更改爲「li：hover .hover」，如果您不喜歡將它設置在整個li元素上，只需創建一個容納您要懸停的元素的容器元素即可。

我總是推薦js方法以上的非js。但如果你真的想用jquery選項，我推薦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>