懸停多個元素不能正常工作

Question

我想懸停多個輸入元素，他們將切換相應元素上的類。

我的代碼存在的問題是，某個元素被卡住了，我需要將鼠標從輸入元素中移出才能切換類。

它爲什麼這樣做？有沒有一個簡單而乾淨的方法來做到這一點？

// UPDATE

在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的結構（刪除圍繞李的股利），你可以用純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。