Use jquery to implement image/Text switching and add special effects

The front-end development process requires constant learning and review. Recently, I plan to continue to study jquery during the day, learn Native javascript at night, and then use some time to promote SEO. These are planned for the moment.
After the daytime work is completed, get a jquery effect similar to that of image Switching

I did not write very well in the past. Today I want to create a new jquery special effect, which is actually very simple. It is just like looking back.
Let's start with a prototype. The first example of the sharp jquery is familiar to everyone. That's right. You are definitely not mistaken.
The Code is as follows:
Copy codeThe Code is as follows:
<Div class = "menu">
<Div class = "has_children">
<Span> first </span>
<A href = ""> 11111111 </a>
<A href = ""> 11111111 </a>
<A href = ""> 11111111 </a>
<A href = ""> 11111111 </a>
<A href = ""> 11111111 </a>
<A href = ""> 11111111 </a>
</Div>
<Div class = "has_children">
<Span> second </span>
<A href = ""> 22222222 </a>
<A href = ""> 22222222 </a>
<A href = ""> 22222222 </a>
<A href = ""> 22222222 </a>
<A href = ""> 22222222 </a>
<A href = ""> 22222222 </a>
</Div>
<Div class = "has_children">
<Span> third </span>
<A href = ""> 33333333 </a>
<A href = ""> 33333333 </a>
<A href = ""> 33333333 </a>
<A href = ""> 33333333 </a>
<A href = ""> 33333333 </a>
<A href = ""> 33333333 </a>
</Div>
<Div class = "has_children">
<Span> fourth </span>
<A href = ""> 44444444 </a>
<A href = ""> 44444444 </a>
<A href = ""> 44444444 </a>
<A href = ""> 44444444 </a>
<A href = ""> 44444444 </a>
<A href = ""> 44444444 </a>
</Div>
</Div>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// $ (". Has_children"). click (function (){
// $ (This ). addClass ("highlight "). children (""). show (). end (). siblings (). removeClass ("highlight "). children (""). hide (); // click to display the effect
//})
$ (". Has_children"). mouseover (function (){
$ (This ). addClass ("highlight "). children (""). show (). end (). siblings (). removeClass ("highlight "). children (""). hide (); // move the mouse over the past Effect
})
})
</Script>

The original book is the effect after clicking, and I move it with a mouse.
Now you can modify css and js properly.
Online effect prototype DEMO online document switching DEMO