I want to use pure css to achieve the effect of sliding over and displaying the drop-down_html/css

I want to use pure css to achieve the effect of sliding over and displaying the drop-down_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:21:18

Original

1011 people have browsed it

<!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>为什么没有用呢这样写？？？？？？？？？？？？？？？

Copy after login

Reply to discussion (solution)

a:hover .inner Do you understand what this means?
This is equivalent to all under a:hover .inner
Obviously your layout does not have this relationship

Master, I understand your point of view. I used the wrong descendant selector, but what technique should I use if I want to indicate when something happens in css? Woolen cloth? For example, in my example, I want to express how the parent div displays when a is crossed over

Your parent elements are hidden and a cannot be seen. How do you make the mouse slide over?

<!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>

Copy after login

The
above was not added by me.
As far as I know, I don't know of any way to select the previous element of a sibling element.
I only know about adjacent sibling selectors. Generally, sibling selectors select backwards. Like your original code, which requires selecting the previous element, I really don’t know if there is such a selector.

So the order of a and div is changed.

I finally understand clearly, dear brothers, my God, I have an urge to die.