toggleClassの条件

マウスオーバーしたときにハイライト表示したいのは、私が管理したものです。toggleClassの条件

しかし、私はまた、最初の項目がすでに強調表示されていることを望みますが、マウスオーバーすると強調表示されなくなります。

さらに、マウスがすべてのリンクを終了した場合は、最後のリンク（マウスオーバーだった）をハイライトしたままにしておきます。私はあまりにもこれを行う方法を理解するためのノブであり、私は誰かが私を導くことを望んでいる。事前に多くの感謝。 :)

$(document).ready(function() { 
 
    $(".menuLink").hover(function() { 
 
     $(this).toggleClass("menuLinkFocus menuLink"); 
 
    }); 
 
});

@font-face { 
 
    font-family: zx_spectrum-7; 
 
    src: url(zx_spectrum-7.ttf); 
 
} 
 

 
* { 
 
    margin: 0px; 
 
    border: 0px; 
 
} 
 

 
.bg { 
 
    background-color: #e0e0ef; 
 
    font-family: zx_spectrum-7; 
 
    font-size: 14px; 
 
} 
 

 
#screen { 
 
    height: 556px; 
 
    width: 720p1; 
 
    background-color: #e0e0ef; 
 
    margin-top: 10px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
#screenFooter { 
 
    height: 20px; 
 
    width: 720px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
} 
 

 
#menu { 
 
    letter-spacing: -1.5px; 
 
    background-image: url(images/menu.jpg); 
 
    height: 96px; 
 
    width: 205px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    line-height: 16px; 
 
    line-width: 201px; 
 
} 
 

 
#menu li { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    padding-top:16px; 
 
    padding-left:16px; 
 
    color:#343434; 
 
} 
 

 
.menuLink { 
 
    text-decoration: none; 
 
    color: #343434; 
 
    display: block; 
 
    width: 201px; 
 
} 
 

 
.menuLinkFocus { 
 
    text-decoration: none; 
 
    background-color: #34efef; 
 
    color: #343434; 
 
    display: block; 
 
    width: 187px; 
 
    margin-left: -14px; 
 
    padding-left: 14px; 
 
} 
 

 
.menuLinkStart { 
 
    text-decoration: none; 
 
    background-color: #34efef; 
 
    color: #343434; 
 
    display: block; 
 
    width: 187px; 
 
    margin-left: -14px; 
 
    padding-left: 14px; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body class="bg"> 
 
    <div id="screen"> 
 
    <div id="menu"> 
 
     <ul> 
 
     <li><a href="#" class="menuLinkFocus">Item 1</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 2</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 3</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 4</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--End Menu--> 
 
    </div> 
 
    <!--End Screen--> 
 
    <div id="screenFooter">Footer text hereLtd</div>

出典

2016-09-09 Cuckoo

デモを作成できますか？ – guradio

それがあります。私はあなたがそれを見ることができないことを意味するいくつかの詰め物を持っていた、それを取り除いた。 – Cuckoo

罰金、これはあなたのために動作しますが、これを試してみてください。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
<style type="text/css"> 
 

 
ul.mylinks{ 
 
\t list-style-type: none; 
 
\t width: 100px; 
 
} 
 

 
ul.mylinks li{ 
 
\t margin-top: 10px; 
 
\t width: 100px; 
 
\t text-align: center; 
 
\t cursor: pointer; 
 
} 
 

 
ul.mylinks li a{ 
 
\t text-decoration:none; 
 
\t color:orange; 
 
\t font-family: monospace; 
 
\t font-size:20px; 
 
} 
 

 
#id1{ 
 
\t background-color: gray; 
 
} 
 

 

 
</style> 
 
</head> 
 

 

 

 
<body> 
 

 
<ul class="mylinks"> 
 
\t <li id="id1"><a href="">link 1111</a></li> 
 
\t <li id="id2"><a href="">link 2222</a></li> 
 
\t <li id="id3"><a href="">link 3333</a></li> 
 
\t <li id="id4"><a href="">link 4444</a></li> 
 
\t <li id="id5"><a href="">link 5555</a></li> 
 
</ul> 
 

 

 
<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $("ul.mylinks li").mouseenter(function(){ 
 
\t \t \t $("ul.mylinks li:first-child").css({"background-color":"white"}); 
 
\t \t }); 
 

 
\t \t $("ul.mylinks li").mouseenter(function(){ 
 
\t \t \t var get_theid = $(this).attr('id'); 
 
\t \t \t var theid = "#"+get_theid; 
 
\t \t \t $(theid).css({"background-color":"gray"}); 
 
\t \t \t $('li:not('+theid+')').css({"background-color":"white"}); 
 
//above line means the 'id' name 'not' 'equal' to the mouse entered 
 
\t \t }); 
 

 
\t \t 
 
\t }); 
 
</script> 
 

 

 
</body> 
 
</html>

幸運。

出典

2016-09-09 04:51:22

多くのおかげで、これは非常にエレガントな答えです。私は変数を使ってそれをする方法を考えようとしていましたが、私はまだそれを行うのに十分な精通ではありません。もし私ができるなら、簡単な質問。この行の詳細はどこで知ることができますか？（ 'li：not（' + theid + '）'）、実際に何が起こったのかは分かりません。ありがとうございました。 – Cuckoo

あなたのコーディングで歓迎され、幸運です...歓声！ –

私はただちに質問をするために自分の返信を編集しました。私が正しい方向、好ましくはW3で私を仰向けに向けることができるなら、私は最も感謝しています。再度、感謝します。 :) – Cuckoo

変更、それはjQueryのhover()の場合と同様にmouseeleaveに戻って変更してから、最初の要素にイベントをトリガしないようにだけmouseenterを使用するコード。

$(document).ready(function() { 
 
    $(".menuLink").on('mouseenter', function() { 
 
     $(this).toggleClass("menuLinkFocus menuLink") 
 
      .closest('li') 
 
      .siblings() 
 
      .find('a') 
 
      .addClass('menuLink') 
 
      .removeClass('menuLinkFocus'); 
 
    }).first().trigger('mouseenter'); 
 
});

@charset "utf-8"; 
 
@font-face { 
 
    font-family: zx_spectrum-7; 
 
    src: url(zx_spectrum-7.ttf); 
 
} 
 
* { 
 
    margin: 0px; 
 
    border: 0px; 
 
} 
 
.bg { 
 
    background-color: #e0e0ef; 
 
    font-family: zx_spectrum-7; 
 
    font-size: 14px; 
 
} 
 
#screen { 
 
    height: 556px; 
 
    width: 720p1; 
 
    background-color: #e0e0ef; 
 
    margin-top: 10px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
#screenFooter { 
 
    height: 20px; 
 
    width: 720px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    text-align: center; 
 
} 
 
#menu { 
 
    letter-spacing: -1.5px; 
 
    background-image: url(images/menu.jpg); 
 
    height: 96px; 
 
    width: 205px; 
 
    padding-right: 257.5px; 
 
    padding-left: 257.5px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    padding-bottom: 232px; 
 
    line-height: 16px; 
 
    line-width: 201px; 
 
} 
 
#menu li { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 
padding-top:16px; 
 
padding-left:16px; 
 
color:#343434; 
 

 
} 
 
.menuLink { 
 
    text-decoration: none; 
 
    color: #343434; 
 
    display: block; 
 
    width: 201px; 
 
} 
 
.menuLinkFocus { 
 
    text-decoration: none; 
 
    background-color: #34efef; 
 
    color: #343434; 
 
    display: block; 
 
    width: 187px; 
 
    margin-left: -14px; 
 
    padding-left: 14px; 
 
} 
 
.menuLinkStart { 
 
    text-decoration: none; 
 
    background-color: #34efef; 
 
    color: #343434; 
 
    display: block; 
 
    width: 187px; 
 
    margin-left: -14px; 
 
    padding-left: 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="screen"> 
 
    <div id="menu"> 
 
    <ul> 
 
     <li><a href="#" class="menuLink">Item 1</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 2</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 3</a> 
 
     </li> 
 
     <li><a href="#" class="menuLink">Item 4</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!--End Menu--> 
 
</div> 
 
<!--End Screen--> 
 
<div id="screenFooter">Footer text hereLtd</div>

出典

2016-09-09 04:02:49 adeneo

ありがとうございました！あなたがしたことを解決するのに時間がかかりますが、完璧に動作します！私はこれを正しく理解する前に、長い道のりを歩んでいます。もう一度大きな感謝！ :) – Cuckoo

@カッコウ - あなたは歓迎です、答えを受け入れることを忘れないでください。 – adeneo

答えて

関連する問題