Hover mehrere Element funktioniert nicht richtig

Question

Ich versuche, mehrere Eingabeelemente zu schweben, werden sie eine Klasse auf dem entsprechenden Element umschalten.

Das Problem, das ich mit meinem Code habe ist, dass irgendwann ein Element stecken geblieben ist und ich die Maus aus dem Eingabeelement bewegen muss, um die Klasse umzuschalten.

Warum macht es das? Gibt es einen einfachen und sauberen Weg, dies zu tun?

// UPDATE

Auf Chrom funktioniert gut .. Safari ist das Problem.

// 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"); 

});

sollte Arbeit für Sie arbeiten ...

Answer 2

Wenn Sie leicht die Struktur Ihres HTML ändern (entfernen Sie die div um das li), können Sie es mit reinem CSS tun können:

.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; 
} 

Ihre HTML würde wie folgt aussehen haben:

<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> 

dieses jsfiddle See.