JavaScript Tutorial/jQuery/hover
Версия от 21:52, 25 мая 2010; (обсуждение)
Содержание
Hover action
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("b").hover(function () { $(this).css({"background-color" : "yellow", "font-weight" : "bolder"}); }, function () { var cssObj = { "background-color" : "#ddd", "font-weight" : "", "color" : "red" } $(this).css(cssObj); }); }); </script>
</head> <body> <body> Hello </body>
</html></source>
hover(over, out): Whenever mouse cursor is moved over a matched element, the first specified function is fired.
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($("*"));
},
function () {
$(this).find("span:last").remove();
}
);
}); </script> </head> <body> <body>
- A
- B
- C
- D
</body>
</html></source>
Hover to add and remove class
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").hover( function () { $(this).addClass("my"); }, function () { $(this).removeClass("my"); } ); }); </script> <style> .my { color:blue; } </style>
</head> <body> <body>
header 1
</body>
</html></source>
Hover to fade in and out
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
}); </script>
</head> <body> <body>
header 1
</body>
</html></source>
Hover to hide tag
<source lang="javascript">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(
function () {
$(this).append($(" ***"));
},
function () {
$(this).find("span:last").remove();
}
);
}); </script>
</head> <body> <body>
header 1
</body>
</html></source>
Tag hover function
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){var newText = $("p").text().split(" ").join("</div>
");
$("p").html(newText).find("div").hover( function () { $(this).addClass("y"); }, function () { $(this).removeClass("y"); }); }); </script> <style> .y { background:yellow; } </style> </head> <body> <body>
a ab abc
</body></html></source>