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

Source: Internet
Author: User

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 ">  
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.