Maison > Article > interface Web > CSS ou JS pour implémenter le survol de la souris pour afficher d'autres compétences element_javascript

CSS ou JS pour implémenter le survol de la souris pour afficher d'autres compétences element_javascript

WBOYoriginal: 2016-05-16 15:18:401399parcourir

Si vous souhaitez passer la souris sur l'élément a et afficher un autre élément b, vous pouvez le faire via css ou js.

js:

Écrivez deux fonctions : mouseenter, mouseleave, par exemple : où

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

css : un élément et un élément b doivent respecter une certaine relation, c'est-à-dire que b est un élément enfant direct de a : comme suit les éléments html, div header_login_name_change est un élément a, ul header_login_menu est un élément b.

Écrivez le survol de l'élément a, suivi de l'élément b

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

De plus, si la largeur de l'élément b doit remplir l'écran et que les éléments qu'il contient doivent être éloignés de la gauche, etc., alors le style de b est le suivant : largeur : 100 %, position : absolu
Positionnez-y les éléments via le div ci-dessous b. Le div est c dans l'exemple. Placez-le au centre :

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

Élément un style : .b {

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

De cette façon, les éléments de c peuvent être positionnés par rapport à c, et ils ne seront pas déformés quelle que soit la largeur de l'écran de l'ordinateur.

Code HTML :

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

Css correspondant :

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

Méthode ps:css pour réaliser une invite de couche coulissante lorsque la souris survole

L'exemple de cet article décrit la méthode d'utilisation de CSS pour réaliser l'invite du calque coulissant lorsque la souris survole. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il s'agit d'un simple effet d'invite de survol, similaire à la balise alt, mais celui-ci est implémenté avec du CSS pur, a une bonne évolutivité et vous pouvez ajouter des images ou d'autres mises en page à la couche d'invite. Cela dépend de vos besoins. besoin.

Le code est le suivant :

<!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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode JavaScript pour acquérir des compétences de conversion_javascript pleine largeur et demi-largeurArticle suivant：Méthode JavaScript pour acquérir des compétences de conversion_javascript pleine largeur et demi-largeur

Articles Liés

Voir plus