Как показать скрытые отделения на наведении мыши?
Как показать ряд onmouseover скрытого отделения?
Например:
<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>
Потребность всего отделения, которой покажут событие onMouseOver.
4 ответа
Если div скрыты, они никогда не вызовут событие mouseover .
Вам нужно будет прослушать событие какого-то другого не скрытого элемента.
Вы можете обернуть свои скрытые блоки div в блоки div, которые остаются видимыми, а затем воздействовать на событие mouseover этих контейнеров.
Вы также можете прослушивать событие mouseout , если хотите, чтобы div исчез, когда мышь покидает контейнер div:
onmouseout="document.getElementById('div1').style.display = 'none';"
Вариант 1 Каждый div специально идентифицируется, поэтому любой другой div (без конкретных идентификаторов) на странице не будет подчиняться псевдоклассу: hover.
<style type="text/css">
#div1, #div2, #div3{
display:none;
}
#div1:hover, #div2:hover, #div3:hover{
display:block;
}
</style>
Вариант 2 Все блоки div на странице, независимо от идентификаторов, имеют эффект наведения.
<style type="text/css">
div{
display:none;
}
div:hover{
display:block;
}
</style>
Наведите указатель мыши на контейнер и наведите указатель мыши на div. Я использую это в основном для меню jQuery DropDown:
Скопируйте весь документ и создайте .html файл, который вы сможете определить самостоятельно!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Divs Case</title>
<style type="text/css">
* {margin:0px auto;
padding:0px;}
.container {width:800px;
height:600px;
background:#FFC;
border:solid #F3F3F3 1px;}
.div01 {float:right;
background:#000;
height:200px;
width:200px;
display:none;}
.div02 {float:right;
background:#FF0;
height:150px;
width:150px;
display:none;}
.div03 {float:right;
background:#FFF;
height:100px;
width:100px;
display:none;}
div.container:hover div.div01 {display:block;}
div.container div.div01:hover div.div02 {display:block;}
div.container div.div01 div.div02:hover div.div03 {display:block;}
</style>
</head>
<body>
<div class="container">
<div class="div01">
<div class="div02">
<div class="div03">
</div>
</div>
</div>
</div>
</body>
</html>
Можно обернуть скрытый div в другом div, который будет переключать видимость с обработчиками событий onMouseOver и onMouseOut в JavaScript:
<style type="text/css">
#div1, #div2, #div3 {
visibility: hidden;
}
</style>
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
<div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show('div2')" onMouseOut="hide('div2')">
<div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show('div3')" onMouseOut="hide('div3')">
<div id="div3">Div 3 Content</div>
</div>