0

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

我想实现以下行为：将鼠标悬停在导航中的链接上时。栏，我想激活图像上的悬停效果。¿ 如果没有 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 达到相同的效果？如何？

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

4

2 回答 2

5

严格的答案是否定的，当您将鼠标悬停在元素 x 上时，不可能让任何元素 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 提议包括添加一个“主题选择器”，它允许您在选择器中使用 a 设置“主题” !，从而在 DOM 中向上选择。（请参阅当前的 W3C 规范- 感谢 Alohci 提供链接）。这对于这种情况也很有用，但仍然不允许您选择“任何东西”，元素必须以某种方式关联。

编辑

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

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

然后，您可以使用目标来启动旋转，方法是将您的 CSS 设置为：

.view-first:target { ... }

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

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

于 2013-07-01T09:41:49.367 回答
0

你可以试试这个：

.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*/}

这适用于 chrom 和 safary，对于更多兄弟，您可以为 firefox 设置 -moz，为 opera 设置 -o

于 2013-07-01T09:41:36.883 回答