I need to meet this demand:Write your page so that if you hover over any element (ie any header, paragraph, image, etc), the element is highlighted in yellow.This must be a one-selector, one-property addition to your stylesheet -- no commas allowed! (Note: This is tricky.)
As the demand,this is tricky! Hope you can help me,THX~
i have used z-index
and pseudo
element :after
here is the js fiddle
* { position:Relative; background: transparent; z-index:1; } *:hover:not(html):not(body):after { content:" "; background: yellow; display:block; position:absolute; top:0; bottom:0; right:0; left:0; z-index:-1; }
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div> <h1><p>Lorem ipsum dolor</p></h1>
You can use jQuery for this
$(document).ready(function(e){
$('*').mouseenter(function(){
$(this).css('background','yellow');
}).mouseleave(function(){
$(this).css('background','#fff')
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.