如何使用CSS使html元素对其他元素产生火影

Question

我有两个要相互依赖的元素集合（相互绑定），一方面我在导航栏中有一些文本链接，另一方面我有一些元素引用了相同的链接。这些图像具有动画效果，如下所述（在将鼠标悬停在图像上时会发生动画）。

我想实现以下行为：将鼠标悬停在导航中的链接上时。酒吧，我想激活图像上的悬停效果。¿没有jQuery是否有可能？

这是动画元素的样式

.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color:rgba(116,89,47,0.8);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first:hover img { 
    transform: scale(1.1);
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

这是导航元素的标记

<nav><ul>
    <li><a href="http://users.dsic.upv.es/~margomez/">DSIC</a></li>
    <li><a href="rna/tutorial/RNA_marcos.html">RNA</a></li>
    <li><a href="ares/index.php">De Ludo Bellico</a></li>
</ul></nav>

这是具有动画效果的图像之一的标记

<div class="view view-first">  
    <img src="images/animage.png" />  
    <div class="mask"/>  
    <div class="content"> 
        <h2>Name</h2>  
        <p>Description</p>  
        <a href="ares/index.php" class="info">Take me there!</a>  
    </div>
</div>

因此，当将鼠标悬停在导航栏中的元素上时，我想在关联的“ view”元素中触发动画

就我所读的内容而言，似乎可以通过使用jQuery（或js）来实现行为。但是，使用纯HTML和CSS可以达到相同的效果吗？怎么样？

下图显示了我的页面的布局。当将鼠标悬停在导航栏的元素中时（蓝色），我想在下面的图片中触发动画。

Answer 1

严格的答案是“ 否”，将鼠标悬停在元素y上时，不可能使任何元素x为其运行动画。但是，在以下情况下可以使用纯CSS：

1）你的聚焦元件是父的.view-first

.y:hover .view-first { ... }

2）你的聚焦元件是相邻于.view-first

.y:hover + .view-first { ... }

3）你的焦点元素是一般的兄弟姐妹的.view-first

.y:hover ~ .view-first { ... }

有趣的是，当前针对CSS4的提议包括添加了一个“主题选择器”，它允许您使用来在选择器中设置“主题” !，从而在DOM中向上选择。（请参阅当前的W3C规范 -感谢Alohci提供的链接）。这对于这种情况也很有用，但是仍然不允许您选择“ anything ”，这些元素必须以某种方式关联。

编辑

Mr. Alien指出:target如果允许单击元素，则使用伪类可能会很有用。假设您的HTML为

<a href="#spin">Start Spin</a>
<div id="spin" class="view-first"></div>

然后，通过将CSS设置为以下内容，可以使用目标启动旋转：

.view-first:target { ... }

虽然我不确定这是否对您有太大帮助。

编辑2019-主题选择器（!）已替换为:has()选择器，但仍在浏览器中完全不受支持（5年！）