複数の要素をホバーすると正しく動作しない

Question

複数の入力要素をホバリングしようとしていますが、対応する要素のクラスを切り替える予定です。

私のコードで問題になっているのは、ある時点で要素が詰まっていて、クラスを切り替えるために入力要素からマウスを移動する必要があるということです。

なぜこれを行うのですか？これを行うには簡単かつクリーンな方法がありますか？

// UPDATE

Chromeで罰金..サファリに問題がある作品。

// 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の構造を変更した場合は（李さんの周りの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を参照してください。