CSS oder JS zum Implementieren von Mausbewegungen zur Anzeige anderer element_javascript-Fähigkeiten-js-Tutorial-php.cn

CSS oder JS zum Implementieren von Mausbewegungen zur Anzeige anderer element_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:18:40

Original

1443 Leute haben es durchsucht

Wenn Sie mit der Maus über Element a fahren und ein anderes Element b anzeigen möchten, können Sie dies über CSS oder JS tun.

js:

Schreiben Sie zwei Funktionen: MouseEnter, MouseLeave, zum Beispiel: where

$("#a").mouseenter(function() {
$("#b").show("normal");
});
$("#a").mouseleave(function() {
$("#b").hide("normal");
});

Nach dem Login kopieren

css: Ein Element und ein B-Element müssen eine bestimmte Beziehung erfüllen, das heißt, B ist ein direktes untergeordnetes Element von A: Wie folgt HTML-Elemente, div header_login_name_change ist ein a-Element, ul header_login_menu ist ein b-Element.

Schreiben Sie den Mauszeiger auf das a-Element, gefolgt vom b-Element

<div id="a" class="a">
<a class="content"><span id="txt">苹果</span></a>
<a class="role_down"></a>
<ul class="b">
<li class="role">栗子</li> 
</ul>
</div>
css，display： block；
.a:hover .b {
display:block;
background: #2B7193;
cursor: pointer;
}

Nach dem Login kopieren

Wenn außerdem die Breite des Elements b den Bildschirm ausfüllen muss und die darin enthaltenen Elemente einen Abstand von links usw. haben müssen, lautet der Stil von b wie folgt: Breite: 100 %, Position: absolut.
Positionieren Sie die Elemente darin durch das Div unter b. Das Div ist im Beispiel c. Stellen Sie es auf die Mitte:

.c {
width: 1280px;
margin: auto;
}。

Nach dem Login kopieren

Element eines Stils: .b {

height: 40px;
width: 100%;
background-color: #2a7193;
position: absolute;
z-index: 10006;
display: none;
margin-top: -5px;
left: 0;
}

Nach dem Login kopieren

Auf diese Weise können die Elemente in c relativ zu c positioniert werden und werden nicht verformt, egal wie breit der Computerbildschirm ist.

HTML-Code:

<div class="a" id="a">
<div class="btn"></div>
<div id="b" class="b">
<div class="c">
<div class="rcontent" id="content">
<a class="dropdown_content">
<span>花生</span>
</a>
</div>
</div>
</div>
</div>

Nach dem Login kopieren

Entsprechendes CSS:

#a:hover .b{
display: block;
}

Nach dem Login kopieren

ps:css-Methode zum Realisieren der Eingabeaufforderung für die herausschiebbare Ebene, wenn die Maus darüber bewegt wird

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von CSS, um die Eingabeaufforderung für die ausziehbare Ebene zu realisieren, wenn die Maus darüber schwebt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist ein einfacher Mouseover-Eingabeaufforderungseffekt, ähnlich dem Alt-Tag, der jedoch mit reinem CSS implementiert ist, eine gute Skalierbarkeit aufweist und Sie der Eingabeaufforderungsebene Bilder oder andere Layouts hinzufügen können brauchen.

Der Code lautet wie folgt:

<!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>css实现层提示</title>
<style>
div{
clear:both;
margin:5px 0 0 0;
font-size:12px;
line-height:22px;
}
a.alt{
position:relative;
background-color:#fff;
float:left;
width:158px;height:20px;
margin:0 auto;
border:1px solid #eee;
text-align:center;
text-decoration:none;
color:#0066cc;
}
a.alt:hover{
background:#fff;
text-decoration:none;z-index:2;
}
a.alt span{
display:none;
}
a.alt:hover span{
position:absolute;
display:block;
top:-1px;left:158px;
width:130px;height:60px;
border:1px solid #eee;
z-index:1;
}
</style>
</head>
<body>
<div>
<a class='alt' href="/"><span>一个高品质脚本资料网站</span>脚本之家</a>
</div>
<div>
<a class='alt' href="/"><span>给你实用的CSS代码</span>网页特效库</a>
</div>
</body>
</html>

Nach dem Login kopieren