css 中的转换属性在使用 hr 时不起作用
[英]transition property in css not working when using hr
问题描述
I'm learning transitions but I can't understand why my hr tags have no effect
我正在学习transitions ，但我不明白为什么我的hr标签没有效果
html { margin: 0; height: 100%; min-height: 100%; } body { margin: 0; height: 100%; min-height: 100%; background-color: red; } hr { transition: width 1s; width: 5rem; } #container { width: 50%; height: 100%; padding: 5rem; background-color: white; margin: auto; } #expand { width: 100%; height: 100px; background: red; transition: height 1s; text-align: center; } #expand:hover { height: 200px; } #expand:hover hr { width: 20rem; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="container"> <hr> <div id="expand"> Learn More </div> <hr> </div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2021-03-21 18:08:26
Your selector doesn't match;您的选择器不匹配； neither of your hr is a descendant of div#expand .您的hr都不是div#expand的后代。 The first one is a previous sibling (for which CSS has no selectors), whereas the 2nd one is an adjacent sibling (see my answer below).第一个是前一个兄弟姐妹（CSS 没有选择器），而第二个是相邻兄弟姐妹（请参阅下面的答案）。
#expand:hover hr targets any hr element that is a descendant of an element being hovered which has the id="expand" . #expand:hover hr以任何hr元素为目标，该元素是具有id="expand"的悬停元素的后代。 The space between #expand:hover and hr is not meaningless in CSS; #expand:hover和hr之间的空格在 CSS 中不是没有意义的； it's the descendant selector .它是descendant selector 。
Given your current markup structure, the only hr you can target when div#expand:hover happens, is the one following it, using the adjacent sibling combinator + :鉴于您当前的标记结构，当div#expand:hover发生时，您可以定位的唯一hr是它后面的那个，使用adjacent sibling combinator符+ ：
html { margin: 0; height: 100%; min-height: 100%; } body { margin: 0; height: 100%; min-height: 100%; background-color: red; } hr { transition: width 1s; width: 5rem; } #container { width: 50%; height: 100%; padding: 5rem; background-color: white; margin: auto; } #expand { width: 100%; height: 100px; background: red; transition: height 1s; text-align: center; } #expand:hover { height: 200px; } #expand:hover+hr { width: 20rem; }
<div id="container"> <hr> <div id="expand"> Learn More </div> <hr> </div>
The rule is that you can neither select backward nor upward from any given selector you've reached .规则是您既不能 select 从您到达的任何给定选择器向后也不能向上。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.