How to realize the switching effect of mouse suspension page by JavaScript

This article mainly shows you "JavaScript how to achieve mouse suspension page switching effect", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "JavaScript how to achieve mouse suspension page switching effect" this article.

The details are as follows

A few days ago made a common page suspension effect, directly above the picture.

Html code

Entertainment, beauty, online shopping, this is about entertainment news, this is about beauty, this is about online shopping.

JS:

$(function () {$(".content div:gt (0)") .hide (); / Hidden class is div $(".tab li") .css ("cursor", "pointer") whose footer is greater than 0 under the tag of content; / / the cursor becomes smaller and the hand $(".tab li") .hover (/ / suspension discoloration, non-suspension recovery color function () {$(this) .addClass ("pink")) }, function () {$(this) .removeClass ("pink");}) .mouseover (function () {$(".content div"). Eq ($(this). Index ()). Siblings (). Hide (). End (). Show ()})

CSS:

Body,div,ul {padding:0px; margin:0px;} .zong {width:800px; margin:150px;}. Tab li {/ * unordered list to point * / list-style:none; / * left float * / float:left; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;} .content {border:solid 1px black / * Don't let him float on the left * / clear:both;}. Content div {/ * content box format * / border-top:1px; height:60px;} .xuqiangangkuang {/ * option box format * / border:solid 1px black; background-color:#ffffff; bottom:-1px; position:relative; z-index:1} .background-color:# FF1493 } these are all the contents of this article entitled "how to achieve the switching effect of mouse hovering pages in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!