简体   繁体   English

如何在CSS中组合通用选择器和属性选择器

[英]how to combine the Universal selector and Attribute selectors in CSS

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~ 希望你能帮我,THX〜

i have used z-index and pseudo element :after 我用过z-indexpseudo元素:after

here is the js fiddle 这是js小提琴

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 您可以为此使用jQuery

$(document).ready(function(e){
      $('*').mouseenter(function(){
         $(this).css('background','yellow');
      }).mouseleave(function(){
         $(this).css('background','#fff')  
      });
 });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM