CSS or JS to achieve a mouse hover display another element _javascript skills

Want to reach the mouse hover to element A, show another element B, can be implemented through the CSS or JS implementation.

Js:

Write two functions: Mouseenter,mouseleave, for example:

$ ("#a"). MouseEnter (function () {
$ ("#b"). Show ("normal");
$ ("#a"). MouseLeave (function () {
$ ("#b"). Hide ("normal");

Css:a elements and B elements need to satisfy a certain relationship, that is, B is a direct child element: The following HTML elements, Div Header_login_name_change is a element, UL Header_login_menu is b element.

Write hover on the A element, followed by the B element

<div id= "A" class= "a" >
<a class= "content" ><span id= "txt" > Apple </span></a>
<a class= "Role_down" ></a>
<ul class= "B" >
<li class= "role" > Chestnut </li> 
</ul >
</div>
css,display:block;
a:hover. b {
display:block;
Background: #2B7193;
Cursor:pointer;
}

In addition, if the element b width needs to be full screen, and the element in it has distance from the left, the B style is as follows: You need to set width:100%, Position:absolute.
Using the div below B to locate the element, the Div is C in the example, and the center is set:

. c {
width:1280px;
Margin:auto
}.

Element a style:. b {

height:40px;
width:100%;
Background-color: #2a7193;
Position:absolute;
z-index:10006;
Display:none;
Margin-top: -5px;
left:0;
}

So the elements in C can be positioned relative to C, no matter how wide the computer screen, will not deform.

HTML code:

<div class= "A" id= "a" >
<div class= "btn" ></div>
<div id= "B" class= "B" >
< Div class= "C" >
<div class= "rcontent" id= "Content" >
<a class= "Dropdown_content" >
< span> Peanut </span>
</a>
</div>
</div>
</div>
</div >

Corresponding CSS:

#a: hover b{
display:block;

Ps:css method of realizing sliding out layer when mouse hover

This article describes the CSS implementation of the mouse hover when the slide out of the layer hint method. Share to everyone for your reference. The specific analysis is as follows:

This is a simple mouse hover hint effect, similar to the ALT tag, but this one is implemented with a pure CSS, scalability, and in the hint layer can be added to the picture or other layout, this depends on your needs.

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">