suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS oder JS zum Implementieren von Mausbewegungen zur Anzeige anderer element_javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:18:401408Durchsuche

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");
});

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;
}

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;
}。

Element eines Stils: .b {

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

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>

Entsprechendes CSS: 

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

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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Methode zum Erlangen von Javascript-Fähigkeiten in voller Breite und halber BreiteNächster Artikel：JavaScript-Methode zum Erlangen von Javascript-Fähigkeiten in voller Breite und halber Breite

In Verbindung stehende Artikel

Mehr sehen