Question

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

image-logo将被隐藏，直到用户悬停在main-image上方。当image-logo悬停效果保持不变时，我还想为main-image设置另一种悬停效果。

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

由于

Answer 1

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

你不能同时盘旋两个兄弟姐妹，但你可以从悬停中导致延迟 snapback 。

.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函数。别忘了在标题中声明jQuery http://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

时发生的一个小错误

显示div＃2，同时在一个容器中将相对div＃1与translition效果悬停

2 个答案: