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
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 promptA home of high-quality script Materials
Practical CSS code webpage special effect Library