css的hover用法

html-css022

css的hover用法,第1张

元素添加hover伪类选择器时候一定要 紧贴 这hover, 不能有空格 ,有空格的话表示给该元素的所有子元素设置里hover样式。

错误例子:

ul :hover{} //ul的所有子元素设置了hover样式

正确例子:

ul:hover{} //ul会显示出想要的效果

ul:hover .one{// 子元素写在hover后面空格隔开

              transform:rotateY(90deg)

          }

 ul:hover .two{

              transform:rotateY(0deg)

          }

ul:hover .thr{

              transform:rotateY(360deg)

          }

仅可以给自身的子元素设置样式 ,给其他元素子元素设置无效

接着上个例子举例子:

div:hover .one{}//不显示任何效果,hover失效

给兄弟元素设置:

ul:hover+.one

在css中hover用于选择鼠标指针浮动在上面的元素,语法“标签选择器:hover{样式代码}”,用法:1、直接在悬浮元素上改变样式;2、改变子元素的样式;3、改变同级元素的样式;4、改变就近元素的样式等。

在CSS中有个hover属性,当鼠标移上去的时候可以将其激活,它可以用来实现类似于js的一些功能。

程序输入如下:

<div id="menu">

<br/>

<ul>

<li>..</li>

<li>..</li>

<li>..</li>

</ul>

</div>

#menu{

overflow:hidden

height:20px}

#menu:hover {

height:100px}

选择鼠标指针浮动在其上的元素,并设置其样式:

a:hover{

background-color:yellow}

对于HTML 部分:

可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button>元素。使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。使用 <div>元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。

对于CSS 部分:

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。