Maison >interface Web >tutoriel CSS >CSS pour obtenir l'effet de déclenchement de la souris
CSS pour obtenir l'effet de déclenchement de la souris
- 墨辰丷original
- 2018-05-11 17:54:202104parcourir
Cet article présente principalement l'utilisation de CSS pour obtenir des effets de déclenchement de la souris. Les amis intéressés peuvent s'y référer.
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 12px;
line-height: 160%;
text-align: left;
height: 100%;
font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';
}
*{ margin:0; padding:0;}
h2,h2 a:link,h2 a:hover,h2 a:visited{
font-size: 14px;
text-decoration: none;
color: #000000;
}
.kw_from {
padding:20px 0 0 0px;
margin: auto;
height: 300px;
overflow: hidden;
width: 650px;
}
.kw_from .sbtn{
float:left;
width:80px;
padding: 16px 0 0 0;
}
.kw_from .searchMore{
float:left;
width:80px;
padding: 4px;
}
#searchNav {
width:430px;
float: left;
}
#searchNav #conter1, #searchNav #conter3{
float:left;
width:250px;
}
#searchNav #conter2, #searchNav #conter4{
float:left;
width:180px;
}
#searchNav ul {
padding: 0;
margin: 0;
list-style: none;
}
#searchNav li {
float: left;
}
#searchNav li ul {
display: none;
top: 20px;
}
#searchNav li:hover ul, #searchNav li.over ul {
display: block;
float:left;
}
#searchNav ul li a{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration: none;
color: #777;
}
#searchNav ul li a:hover{
background-color:#f4f4f4;
}
#searchNav #jobKw{
width:220px;
height:18px;
}
#searchNav #cityKw{
width:130px;
height:18px;
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("searchNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
</head>
<body>
<div class="kw_from">
<form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">
<ul id="searchNav">
<li id="conter1"><h2>找什么</h2>
<input id="jobKw" name="jobKw" type="text" />
<ul id="conter3">
<li><a href="#">会计</a> </li>
<li><a href="#">网页设计</a></li>
<li><a href="#">翻译</a></li>
<li><a href="#">家教</a></li>
<li><span class="moreCity"><a href="#">更多>> </a></span></li>
</ul>
</li>
<li id="conter2"><h2>在哪里</h2>
<input id="cityKw" name="cityKw" type="text" />
<ul id="conter4">
<li><a href="#">北京</a> </li>
<li><a href="#">上海</a></li>
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">南京</a></li>
<li><a href="#">天津</a></li>
<li><a href="#">杭州</a></li>
<li><a href="#">成都</a></li>
<li><a href="#">重庆</a></li>
<li><a href="#">武汉</a></li>
<li><a href="#">西安</a></li>
<li><a href="#">沈阳</a></li>
<li><span class="moreCity"><a href="#">更多城市>></a></span></li>
</ul>
</li>
</ul>
<div class="sbtn">
<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
</div>
<div class="searchMore">
</form>
</div>
</body>
</html>Recommandations associées :
Native JS +HTML5 réalise l'effet d'animation de particules qui circule avec la souris
css réalise l'effet dynamique du déplacement de la souris vers l'intérieur et l'extérieur
Css pur Réaliser une mise en évidence progressive lorsque vous y déplacez la souris
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
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：Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignetteArticle suivant：Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette