Question

我有以下结构：

<div class="menuHomeCategorias Accesoriosclass">
  <div class="categoryName Accesorios" name="Accesorios">
    <p>Accesorios</p>
  </div>
  <img class="categoriasHome" alt="Categoria" name="Accesorios" src="media/com_hikashop/upload/accesorios.jpg">
</div>

在我的CSS上我有这个：

.categoryName:hover {
  background-color: #BF003E;
  color: #FFFFFF;
}

当我的指针在img上面时，我需要触发.categoryName:hover，我一直试图用这种方式用jquery做这个，但它会激发一个太多的递归消息：

$('.categoriasHome').bind('mouseover', function(){
    console.log("over");    
    $(".categoryName.Accesorios").mouseover();
});

是否有人可以指出我正确的方向？

提前感谢。

Answer 1

我认为添加/删除类名会更容易。喜欢这个

$('.categoriasHome').hover(function(){
    console.log("over");    
    $(".categoryName.Accesorios").toggleClass('hovered');
});

并相应地调整CSS。

Answer 2

这是一个纯CSS解决方案：

HTML：

<div class="menuHomeCategorias Accesoriosclass">
  <img class="categoriasHome" alt="Categoria" name="Accesorios" src="http://placehold.it/50x50">
  <div class="categoryName Accesorios" name="Accesorios">
    <p>Accesorios</p>
  </div>
</div>

的CSS：

.categoriasHome:hover + .categoryName{
    background-color:#ee0000;
}

这是一个jfiddle

Answer 3

    Add this class in the css:
    .newbackground{
      background-color: #BF003E;
      color: #FFFFFF;
    }  

$(".categoriasHome").on("mouseover",function(){

    $(this).addClass("newbackground");
});

$(".categoriasHome").on("mouseout",function(){
    $(this).removeClass("newbackground");
});

Answer 4

以下是使用JavaScript的解决方案：

HTML：

  <div class="menuHomeCategorias Accesoriosclass">
      <div class="categoryName Accesorios" Id="Accesorios"  name="Accesorios">
        <p>Accesorios</p>
      </div>
      <img class="categoriasHome" alt="Categoria" name="Accesorios" src="media/com_hikashop/upload/accesorios.jpg" onmouseenter="triggerFunction('Accesorios')" onmouseout="triggerFunctionReverse('Accesorios')">
    </div>

CSS：

.categoryName {
  background-color: none;
  color: #000000;
}
.categoryNameHover {
  background-color: #BF003E;
  color: #FFFFFF;
}

JavaScript的：

function triggerFunction(text){
  document.getElementById(text).setAttribute("class", "categoryNameHover");
}
function triggerFunctionReverse(text){
  document.getElementById(text).setAttribute("class", "categoryName");
}

在CodePen

上查看

鼠标悬停在其他元素上时将鼠标悬停在某个元素上

4 个答案: