Сохранение состояния элемента списка на: hover - PullRequest
Новая
       2

Сохранение состояния элемента списка на: hover

0 голосов
/ 10 марта 2012

Я работаю с CSS для небольшой идеи меню, которое у меня есть.

Я надеюсь, что когда все будет готово, я могу навести курсор на ссылку «Тест 1», и содержимое «Тест 1» отобразится в # content div. А если навести указатель мыши на ссылку «Тест 2», отобразится содержимое теста 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>

Ответы [ 2 ]

1 голос
/ 10 марта 2012

вам нужны некоторые изменения в вашей разметке и 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>

Это будет работать для n элементов меню, если вы будете следоватьобозначение разметки

1 голос
/ 10 марта 2012 
<!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>

** ОБНОВЛЕНО ** Вы это имели в виду?

...