> 웹 프론트엔드 > HTML 튜토리얼 > 我想用纯css实现划过显示下拉的效果_html/css_WEB-ITnose

我想用纯css实现划过显示下拉的效果_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:21:18
원래의
1024명이 탐색했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">		<title>Untitled Document</title>		<style type="text/css">			.outer{				width:200px;				background:yellow;			}			.inner{				background-color:red;				display:none;							}			a:hover .inner{				display:block;<!--这里为什么鼠标划过不显示出来呢-->			}					</style>	</head>	<body>		<div class="outer">			<a>aaaaaaaaaaaa</a>			<div class="inner"><a href="#">这里想鼠标划过显示</a></div>		</div>	</body></html>为什么没有用呢这样写???????????????
로그인 후 복사


回复讨论(解决方案)

a:hover .inner LZ明白这个什么意思么
这个等价于 a:hover 下所有的 .inner
很明显 你的布局不是这种关系

大神我明白你的意识了,是我后代选择器用错了,但是css里如果要表示当什么发生时用什么技巧呢?例如我的例子里想表达当a划过时父div显示怎么表示呢

你父元素都隐藏起来了,a都看不到,你如何做到鼠标滑过?

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>        <style type="text/css">        body > div {            position:relative;        }        div > div {            display:none;            border:1px solid #ccc;            padding:10px;        }        a:hover+div {            display:block;        }    </style></head><body>    <div>        <a href="#">google chrome</a>        <div>hello world</div>    </div></body></html>
로그인 후 복사

上面的 
不是我加的。
目前据我所知,我还不知道有什么办法可以选择一个同胞元素的前一个元素。
我只知道相邻同胞选择器,一般同胞选择器,都是向后选择,向你原来代码那样,要求选择前一个元素的我还真不知道有没有这种选择器。

所以a和div的顺序换了下。

我终于明明白了,各位好心的哥哥们,我的天啊,有一种想死的冲动啊。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿