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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:21 PM

<!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的顺序换了下。

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn