当hover h3的时候咋让父类c-container 变化,并却只能使用CSS?

目前并不可以。题主这是在给百度搜索结果写样式么……

■网友
父元素选择器不能用其他答主已经说了,但如果只是视觉上接近题主想要的效果的话,还是有一点点办法的:
+==== 不正经答题分界线 ====+
.t, .t ~ *:last-child { transition-property: margin-top, padding-bottom; transition-duration: 200ms; transition-timing-function: ease-in-out;}.t:hover { margin-top: -5px;}.t:hover ~ *:last-child { padding-bottom: 5px;}.c-container { position: relative;}.t::after { content: \u0026#39;\u0026#39;; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: box-shadow 200ms ease-in-out; z-index: -1;}.t:hover::after { box-shadow: 10px 10px 40px rgba(168, 182, 191, .7);}原理:负margin用法权威指南
关键点:
使用负 margin 代替 transform,因为 transform 会创建一个新的局部坐标系,导致我们无法生成一块与父元素等大的内容块(阴影)在最后一个兄弟元素上添加反向 padding 来补偿负 margin 缩减的空间(为什么不用 margin — margin collapse)效果图:

当hover h3的时候咋让父类c-container 变化,并却只能使用CSS?


不足点:底部多出了 5px 的空隙

■网友
答案是:不能css能做的交互是有局限性的,不管是点击还是移入都是如此,当你发现css不能解决的时候请使用javascript。
■网友
【当hover h3的时候咋让父类c-container 变化,并却只能使用CSS?】 div 可以使用hover 特别尴尬

■网友
沒有選擇父元素的,你硬要用css只能扯自己的蛋,而且不能hover也不理解是什麼意思


    推荐阅读