CSS or JS allows you to hover your mouse over and display another element _ javascript tips-js tutorial

This article mainly introduces CSS or JS to show information about another element by hovering over the mouse. For more information, see <G id = "1"> element a </G>, it can be implemented through 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, p 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

Apple
 
 

  
  
Chestnuts
 
 
 
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.
Locate the element through p below B, which is c in the example, and set 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:

Peanut

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:

 Css Implementation Layer prompt
A home of high-quality script Materials
Practical CSS code webpage special effect Library