css做hover事怎么将两个元素等分

html-css019

css做hover事怎么将两个元素等分,第1张

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

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

比如说有一个需求，需要第一个div里面的p标签focus的时候，第二个div改变样式，失去焦点的时候，第二个div再恢复原来的样式，如果用点击事件的话，就比较麻烦了，因为还有给document加上点击事件来给第二个div再恢复原来的样式，如果给p标签加上 tabindex 属性的话，就能用focus和blur事件，就很简单

<!DOCTYPE HTML>

<html>

<head>

<title>Page Title</title>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

<style>

ul li:hover{

visibility: hidden

}

 

</style>

</head>

<body>

<div>

<ul>

<li>1111</li>

<li>2222</li>

</ul>

</div> 

</body>

</html>