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

【问题标题】：Put Hover on some element when mouseover other将鼠标悬停在某个元素上时将鼠标悬停在其他元素上
【发布时间】：2014-03-26 22:37:06
【问题描述】：

我有以下结构：

<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();
});

有人可以为我指明正确的方向吗？

提前致谢。

【问题讨论】：

stackoverflow.com/questions/18334308/…
您可能喜欢的非 jquery 解决方案：jsfiddle.net/techsin/fcxA4

标签： javascript jquery html css

【解决方案1】：

我认为添加/删除类名会更容易。像这样

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

并相应地调整 CSS。

【讨论】：

【解决方案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

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案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

【讨论】：