如何使用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>

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

对于我所读过的内容，似乎可以通过使用jQuery（或js）来实现行为。但是，使用纯HTML和CSS可以实现相同的效果吗？ ¿如何？

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

Answer 1

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

1）您的焦点元素是.view-first

的父

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

2）您的焦点元素相邻到.view-first

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

3）您关注的元素是.view-first的一般兄弟

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

有趣的是，CSS4的当前提议包括添加“主题选择器”，它允许您使用!在选择器中设置“主题”，从而在DOM中向上选择。 （参见current W3C spec - 感谢Alohci的链接）。这对于这种情况也很有用，但仍然不允许您选择“任何”，元素必须以某种方式相关。

修改

Mr. Alien指出如果允许单击元素，使用:target伪类可能很有用。让我们说你的HTML为

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

然后你可以使用目标来启动旋转，将CSS设为：

.view-first:target { ... }

虽然我不确定这对你有多大帮助。

Answer 2

你可以试试这个：

.view-first {    opacity: 0;
/*more properties here*/}
.myDiv:hover ~ .view-first{
    -webkit-animation: boxanimation 1.5s;
    opacity: 1;
    -webkit-transition: all 0s;
    -webkit-animation-fill-mode: initial;
/*more properties here*/}

这适用于chrome和safari，对于更多浏览器，您可以为firefox设置-moz，为-to设置-o