| Initial results: | Mouse into effect: |
|
|
First, add the jQuery library and I am a direct reference to Baidu CDN address
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
Write a jQuery load event
$ ( Function () {}); // because HTML document by the browser is loaded from top to bottom, loading events to avoid the JavaScript code on the back too and no effect
Loading events written inside the mouse into <li> tag method called
$ ( '# left> Li, right #> Li') MouseEnter (. function () {}); // #left> Li selector is to obtain the left <li> tag, empathy #right> li is obtained the right of the <li> tag, mouseenter mouse events to be triggered into selected elements
Get the current index of selected elements
var I = $ ( the this ) .index (); // index () method returns the index position of the element relative to the specified other specified elements.
Because the picture on the right index values need to add the number to the left of the picture to display correctly all need to add a judge to the left or right of the selected element
IF ($ ( the this .) .parent () attr ( "ID") == "right" ) { I + =. 4 ; } IF ($ ( the this .) .parent () attr ( "ID") == " right " ) { I + =. 4 ; } // parent element id to the right of the current element is an unordered list id, the index value plus 4, parent () method returns the parent element directly selected element, attr () method sets or returns the attributes and values of selected elements
Displays a corresponding image in the middle
$.. ( "# Center> li: not ()") hide () EQ (i) .Show (); // because all the pictures are added in the middle of unordered list, all you need to hide all pictures after displaying images required,: not (selector) remove all elements of a given match the selector, hide () method hides the selected element,: eq (index) select an index equal to the index element, indexed from 0, Show ( ) show hidden method selected elements.
Entire jQuery code
<Script the src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </ Script>
<Script>
$ ( function () {
$ ( '#left> Li , # right> Li ') MouseEnter (. function () {
var I = $ ( the this ) .index (); // . index () method returns the index position of the element relative to the specified other specified elements
IF ($ ( the this ) . .parent () attr ( "id") == "right" ) {
I + =. 4 ;
} // parent element id to the right of the current element is an unordered list id, the index value plus 4, parent () method returns selected elements direct parent element, attr () method returns the setting of the selected element or attribute and value
$ ( "# center> li: not()").hide().eq(i).show(); // display the picture that you need because all the pictures are added in the middle of unordered list, all you need to hide all pictures,: not (selector) remove all elements that match the given selector, hide () method hides the selected element,: eq (index) select an index equal to the index element, indexed from 0, Show () method to display the hidden element is chosen.
}); // #left> li selector is to get the left <li> tag, empathy #right> li acquired is the right of the <li> tag, mouseenter event is the mouse into the selected element is triggered
}); / / because the HTML document is loaded by the browser from top to bottom, and loading events to avoid the JavaScript code on the back too and no effect
</ script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>博客园（https://www.cnblogs.com）</title> <link rel="stylesheet" href="css/good2.0.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { $('#left> Li, right #> Li ' ) .mouseenter ( function () { var I = $ ( the this ) .index (); // . index () method returns the index position of the element relative to the specified other specified elements IF ( $ ( the this .) .parent () attr ( " id " ) == " right " ) { I + = . 4 ; } // parent element id to the right of the current element is an unordered list id, the index value plus 4, parent () method returns the immediate parent element of the selected element, attr () method returns the setting of the selected element or attribute and value $ ( " #center> Li: Not () " ) .hide () EQ (I) the .Show. (); // display the picture that you need because all the pictures are added in the middle of unordered list, all you need to hide all pictures,: not (selector) remove all elements that match the given selector, hide () method hides the selected element,: eq (index) select an index equal to the index element, indexed from 0, Show () method to display the hidden element is chosen. }); // #left> li selector is to get the left <li> tag, empathy #right> li acquired is the right of the <li> tag, mouseenter event is the mouse into the selected element is triggered }); / / because the HTML document is loaded by the browser from top to bottom, and loading events to avoid the JavaScript code on the back too and no effect </ Script > </ head > < body > < div class = "wrapper" > < UL ID = "left" > < Li > < A the href = "#"a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">牛仔裤</a></li> </ul> <ul id="center"> <li><a href="#"><img src="img/雪地靴.jpg"/></a></li> <li><a href="#"><img src="img/冬裙.jpg"/></a></li> <li><a href="#"><img src="img/呢大衣.jpg"/></a></li> <li><a href="#"A/> </= "IMG / Jeans .jpg"the srcIMG> <></li> <li><a href="#"><img src="img/登山鞋.jpg"/></a></li> <li><a href="#"><img src="img/皮带.jpg"/></a></li> <li><a href="#"><img src="img/男毛衣.jpg"/></a></li> <li><a href="#"><img src="img/男棉服.jpg"/></a></li> </ul> <ul id="right"> <li><a href="#">登山鞋</a></li> <li><a href="#">皮带</a></li> <li><a href="# " > </A</Male sweater>li> <li><a href="#">男棉服</a></li> </ul> </div> </body> </html>
* { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 218px; height: 108px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(../img/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { color: #fff; background-image: url(../img/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } img { width: 120px; height: 108px; }