Question

我试图悬停多个输入元素，他们将在相应的元素上切换一个类。

我的代码存在的问题是，有时元素卡住了，我需要将鼠标从输入元素移出以切换类。

为什么这样做？有一种简单而干净的方法吗？

//更新

在Chrome上工作正常.. safari就是问题。

// address
var addressInput = $('.menu__item input[name="dashAddress"]');
addressInput.hover(function() {
  $('.dottedElement').removeClass('dottedElement');
  $('.myAddress').addClass('dottedElement');
  $('.card-img-div-flip').toggleClass("card-img-div-flip-Active");
});
addressInput.keyup(function() {
  var stt = $(this).val();
  $(".myAddress").text(stt);
});

// phone
var phoneInput = $('.menu__item input[name="dashPhone"]');
phoneInput.hover(function() {
  $('.dottedElement').removeClass('dottedElement');
  $('.myPhone').toggleClass('dottedElement');
});
phoneInput.keyup(function() {
  var stt = $(this).val();
  $(".myPhone").text(stt);
});

// phone
var webInput = $('.menu__item input[name="dashWeb"]');
webInput.hover(function() {
  $('.dottedElement').removeClass('dottedElement');
  $('.myWeb').toggleClass('dottedElement');
});
webInput.keyup(function() {
  var stt = $(this).val();
  $(".myWeb").text(stt);
});

// phone
var catInput = $('.menu__item input[name="dashCat"]');
catInput.hover(function() {
  $('.dottedElement').removeClass('dottedElement');
  $('.myCat').toggleClass('dottedElement');
});
catInput.keyup(function() {
  var stt = $(this).val();
  $(".myCat").text(stt);
});

.dottedElement {
    background: yellow;
    border: 1px dotted red;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
<li class="menu__item">
  <input class="menu_input" type="text" name="dashAddress" placeholder="Business Address" />
</li>
<li class="menu__item">
  <input class="menu_input" type="text" name="dashPhone" placeholder="Business Phone" />
</li>
<li class="menu__item">
  <input class="menu_input" type="text" name="dashWeb" placeholder="Business Web" />
</li>
<li class="menu__item">
  <input class="menu_input" type="text" name="dashCat" placeholder="Business Cat" />
</li>
</div>

<div>
</BR></BR>
<a class="myAddress" href="" target="_blank"><span>ADDRESS</span></a>
</BR></BR>
<a class="myPhone" href="" target="_blank"><span>Phone</span></a>
</BR></BR>
<a class="myWeb" href="" target="_blank"><span>Web</span></a>
</BR></BR>
<a class="myCat" href="" target="_blank"><span>Category</span></a>
</div>

Answer 1

$("li").hover(
  function () {
    $(this).addClass('hover);
  }, 
  function () {
   $(this).removeClass("hover");

} ）;

应该为你工作......

Answer 2

如果你稍微改变HTML的结构（删除li周围的div），你可以使用纯CSS来实现：

.menu__item:nth-of-type(1):hover ~ div a.myAddress{
  background:yellow;
}
.menu__item:nth-of-type(2):hover ~ div a.myPhone{
  background:yellow;
}
.menu__item:nth-of-type(3):hover ~ div a.myWeb{
  background:yellow;
}
.menu__item:nth-of-type(4):hover ~ div a.myCat{
  background:yellow;
}

您的HTML必须如下所示：

<li class="menu__item">
      <input class="menu_input" type="text" name="dashAddress" placeholder="Business Address" />
</li>
<li class="menu__item">
      <input class="menu_input" type="text" name="dashPhone" placeholder="Business Phone" />
</li>
<li class="menu__item">
      <input class="menu_input" type="text" name="dashWeb" placeholder="Business Web" />
</li>
<li class="menu__item">
      <input class="menu_input" type="text" name="dashCat" placeholder="Business Cat" />
</li>

<div>
    <br><a class="myAddress" href="" target="_blank"><span>ADDRESS</span></a><br>
    <a class="myPhone" href="" target="_blank"><span>Phone</span></a><br>
    <a class="myWeb" href="" target="_blank"><span>Web</span></a><br>
    <a class="myCat" href="" target="_blank"><span>Category</span></a>
</div>

请参阅此jsfiddle。

悬停多个元素无法正常工作

2 个答案: