在一个容器中悬停具有翻译效果的相对 div #1 时显示 div #2

Question

我对此有一点问题：http://jsfiddle.net/eyy0c4uf/我想做以下几点。

image-logo将被隐藏，直到用户将鼠标悬停在main-image上。我还想在保持main-image悬停效果的同时为image-logo提供另一种悬停效果。

仅限 CSS/HTML/JS 解决方案。

谢谢

Answer 1

这个答案是基于作者在查看其附加代码后推断的意图。

不能同时悬停两个同级，但可能会导致悬停延迟回弹。

.logo-image {
    opacity: 0;
    transition: opacity 10000s, box-shadow 2s;
}
.main-image:hover + .logo-image {
    opacity: 1;
    transition: opacity 1s;
}
.logo-image:hover {
    box-shadow: 0 1em 2em rgba(0,0,0,.5);
}

.logo-image 上的转换延迟将导致它保留其第二个状态 10000 秒。这个数字是任意选择的——我们只需要它持续一段时间。

因此，您只需将鼠标悬停在 .main-image 元素上，然后显示其同级元素。同级有自己的:hover状态，然后可以与之交互。

小提琴：http://jsfiddle.net/jonathansampson/eyy0c4uf/3/

公平警告，这是一个黑客。我不建议你依赖这样的方法。相反，确定您希望实现的效果，并进行适当的标记/脚本更改以适当地满足该需求。

这个答案只是一个证明，在某种程度上，这在单独的CSS上是可能的。

Answer 2

这是你需要的jQuery函数。不要忘记在标头中声明 jQueryhttp://jsfiddle.net/eyy0c4uf/4/

jQuery( document ).ready(function ( $ ) {
    $( ".main-image" ).hover(
        function () {
            $( ".logo-image" ).css( 'display', 'block' );
        }, 
        function () {
            $( ".logo-image" ).css( 'display', 'none' );
        }
    );
    $( ".logo-image" ).hover(
        function () {
            $( ".logo-image" ).css( 'display', 'block' );
        },
        function () {
            $( ".logo-image" ).css( 'display', 'none' );
        }
    );
});

这是jQuery悬停效果的一个例子。如果您想要更多的东西，请告诉我。

编辑：我修复了悬停.logo-image时发生的一个小错误