CSS or JS enables the mouse to hover over and display another element. css hover over

CSS or JS enables the mouse to hover over and display another element. css hover over

To move the cursor over element a and display another element B, you can use css or js.

Js:

Write two functions: mouseenter and mouseleave. For example:

$("#a").mouseenter(function() {$("#b").show("normal");});$("#a").mouseleave(function() {$("#b").hide("normal");});

Css: Elements a and B must have a certain relationship, that is, B is the direct sub-element of a: The following html element, div header_login_name_change is the element, and ul header_login_menu is the B element.

Write hover on Element a, followed by Element B

<Div id = "a" class = "a"> <a class = "content"> <span id = "txt"> Apple </span> </a> <class = "role_down"> </a> <ul class = "B"> <li class = "role"> chestnuts </li> </ul> </div> css, display: block ;. a: hover. B {display: block; background: #2B7193; cursor: pointer ;}

In addition, if the width of Element B needs to be full screen, and the elements in it have distance to the left, the style of B is as follows: width: 100%, position: absolute needs to be set.
Use the div below B to locate the element. This div is the c in the example and is set to center:

.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;}

In this way, the elements in c can be located relative to c. No matter how wide the computer screen is, they will not be deformed.

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>

Corresponding css:

#a:hover .b{display: block;}

Ps: css Implementation of sliding out layer prompts when hovering

This example describes how to implement the slide-out layer prompt when css is hovering over the mouse. Share it with you for your reference. The specific analysis is as follows:

This is a simple special effect for hovering over the mouse, similar to the alt tag. However, it is implemented with pure CSS, with good scalability, and images or other la s can be added to the prompt layer, 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"> 
Articles you may be interested in:

 

 
  
CSS mouse hover menu image exchange technology implementation
 
  
Navigation bar that is dynamically tumble when the mouse is hovering in javascript
 
  
A simple JS mouse hover effect method
 
  
Sharing the brilliant hover effects of 33 jQuery and CSS3
 
  
Js implements the method of scrolling text description when hovering over an image
 
  
How to Use js to implement text link mouse hover prompts for animation Effects
 
  
Javascript imitation Sina game channel mouse hover show sub menu Effect
 
  
Js achieves vertical text scrolling and hovering