リストアイテムの状態を維持する：ホバー

私は小さなメニューのアイデアのためにいくつかのCSSを使っています。リストアイテムの状態を維持する：ホバー

準備ができたら、テスト1のリンクにマウスを合わせて、 #content divにテスト1のコンテンツが表示されることを期待しています。また、「Test 2」のリンクに移動すると、Test 2のコンテンツが表示されます。

それは私が（リンク）から#content div要素にカーソルを上に移動するとき、それはそのリンクのため、その領域内のコンテンツを維持することがいる可能性があります場合、私も期待していました。

これは可能ですか？

これを手伝ってくれてありがとうございました。ここで

が私の基本的なHTMLです： http://jsfiddle.net/PjHnM/1/

UPDATE

私はここで見つける例があります。 http://jsfiddle.net/88nKd/ を私はまだ私がホバー時の状態を維持する方法がわかりませんよコンテンツ部分に挿入します。

<!DOCTYPE html> 
<html><head><meta charset="utf-8" /> 
<title>Divs</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
#main {height:100px;width:400px;float:left;background:#eee;} 
#main ul {height:100px;float:left;background:#999} 
#main ul li a {width:100px;display:block;background:#333;color:#fff} 
#main ul li a:hover {background:#777} 
#content {height:100px;} 
#content div {float:left} 
</style> 
</head> 
<body> 

<div id="main"> 
    <ul> 
     <li><a href="">Test 1</a></li> 
     <li><a href="">Test 2</a></li> 
    </ul> 
    <div id="content"> 
     <div style="display:none">Test 1 Content</div> 
     <div style="display:none">Test 2 Content</div> 
    </div> 
</div> 

</body> 

</html>

出典

2012-03-10 michaelmcgurk

に従うように、メニュー・エレメントのn個の数のために動作します。 JSの助けが必要です。 – Joseph

<!DOCTYPE html> 
<html><head><meta charset="utf-8" /> 
<title>Divs</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
#main {height:100px;width:400px;float:left;background:#eee;} 
#main ul {height:100px;float:left;background:#999} 
#main ul li a {width:100px;display:block;background:#333;color:#fff} 
#main ul li a:hover {background:#777} 
#content {height:100px;} 
#content div {height:100px;} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script> 
$(function(){ 
$("#test1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();}); 
$("#test2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();}); 

$("#content1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();}); 
$("#content2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();}); 
}); 
</script> 
</head> 
<body> 

<div id="main"> 
    <ul> 
     <li><a href="javascript:void;" id="test1">Test 1</a></li> 
     <li><a href="javascript:void;" id="test2">Test 2</a></li> 
    </ul> 
    <div id="content"> 
     <div style="display:none" id="content1">Test 1 Content</div> 
     <div style="display:none" id="content2">Test 2 Content</div> 
    </div> 
</div> 

</body> 

</html>

** UPDATED ** は、これはあなたが何を意味しましたか？

出典

2012-03-10 07:48:09 M1K1O

ありがとうございます。それは秒で試してみましょう:-)申し訳ありません私は同様の部分的な解決策を見つけることができたとして、上記の私の質問は少し編集されています。 – michaelmcgurk

これは新しい更新版です。私はこれが何を意味するのだろうと思う。 – M1K1O

それを試して、それは素晴らしい動作します。しかし、#contentボックスにカーソルを置いてテキストをそのまま残すことが可能かどうかも疑問です。 – michaelmcgurk

あなたのマークアップとjquery（またはそのようにすればプレーンjs）を変更する必要があります。

<head> 
<script> 
$("#menuItems li").mouseover(function(){ 
     var className = $(this).attr("class"); 
     $("#content div").hide(); 
     $("#content").find("."+className).show(); 
}); 
</script> 
</head> 

<body> 
<div id="main"> 
    <ul id="menuItems"> 
     <li><a class="test1" href="">Test 1</a></li> 
     <li><a class="test2" href="">Test 2</a></li> 
    </ul> 
    <div id="content"> 
     <div class="test1" style="display:none">Test 1 Content</div> 
     <div class="test2" style="display:none">Test 2 Content</div> 
    </div> 
</div> 
</body>

これは、限り、uはあなたが、プレーンCSSでこれを行うことができないマークアップ記法

出典

2012-03-10 07:53:15 redDevil

リストアイテムの状態を維持する：ホバー

答えて

関連する問題