• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :hover

    定义和用法

    • :hover,鼠标移到链接上时。最常见的例子是将鼠标指针移动到超链接的边界内
    • :hover,是一个伪类,它适用于处于悬停状态的元素。
    • :hover,可用于所有元素,不仅是链接。
    • :link选择器设置了未访问过的页面链接样式。:visited选择器设置访问过的页面链接的样式。:active选择器设置当你点击链接时的样式。
    • 为了产生预期的效果,在 CSS 定义中,:hover必须位于:link:visited之后!

    语法:

    E:hover

    设置元素在其鼠标悬停时的样式。

    • 如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问。这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现
    • 超链接的4种状态,需要有特定的书写顺序才能生效。超链接状态顺序::link:visited:hover:active注意:hover必须位于:link:visited之后,:active必须位于:hover之后

    注意:在触摸屏上:hover有问题,基本不可用。不同的浏览器上:hover伪类表现不同。可能从不会触发;或者在触摸某元素后触发了一小会儿;或者总是触发即使用户不在触摸了,直到用户触摸别的元素。触摸屏非常普遍,所以网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。

    浏览器支持

    所有浏览器都支持

    例子

    :link:hover { outline: dotted red; }
    .foo:hover { background: gold; }
    

    下拉按钮

    使用:hover伪类可以创建复杂的层叠机制。一个常见用途,比如,创建一个纯CSS的下拉按钮(不使用JavaScript)。本质是创建如下的CSS:

    div.menu-bar ul ul {
     display: none;
    }
    
    div.menu-bar li:hover > ul {
     display: block;
    }
    

    HTML内容如下:

    <div class="menu-bar">
     <ul>
    	 <li>
    		 <a href="example">menu</a>
    		 <ul>
    			 <li>
    			 <a href="example">link</a>
    			 </li>
    			 <li>
    				 <a class="menu-nav" href="example">submenu</a>
    				 <ul>
    					 <li>
    						<a class="menu-nav" href="example">submenu</a>
    						<ul>
    							 <li><a href="example">link</a></li>
    							 <li><a href="example">link</a></li>
    							 <li><a href="example">link</a></li>
    							 <li><a href="example">link</a></li>
    						</ul>
    					 </li>
    					 <li><a href="example">link</a></li>
    				 </ul>
    			 </li>
    		 </ul>
    	 </li>
     </ul>
    </div>
    

    上篇::visited

    下篇::active