**纯CSS 有没有办法实现 :hover 菜单出来, 点击菜单 hover效果消失?而不仅是鼠标移出后才消失 **
<div>
<div>
<span>标题</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
ul:{
display:none;
}
div:hover ul{
display:block
}
**纯CSS 有没有办法实现 :hover 菜单出来, 点击菜单 hover效果消失?而不仅是鼠标移出后才消失 **
<div>
<div>
<span>标题</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
ul:{
display:none;
}
div:hover ul{
display:block
}
纯CSS可以实现,用
div:hover ul:not(:active){
display:block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
ul{
display:none;
}
div:hover ul:not(:active){
display:block;
}
</style>
</head>
<body>
<div>
<span>标题</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>