Home >Web Front-end >HTML Tutorial >I want to use pure css to achieve the effect of sliding over and displaying the drop-down_html/css_WEB-ITnose
I want to use pure css to achieve the effect of sliding over and displaying the drop-down_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:21:181050browse
<!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>为什么没有用呢这样写？？？？？？？？？？？？？？？ 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> The 0c6dc11e160d3b678d68754cc175188a 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.