Question

我是新手，希望我礼貌/正确地问？！（我已经包含了我到目前为止的代码。）

我试图通过将鼠标悬停在'#spiral'div上来应用'#blueBar'的悬停。我已经尝试过使用CSS，JQuery和Javascript一段时间，但无济于事。

最终结果是我希望在Badge.png后面有2个'blueBars'相互交叉。在“螺旋”上空盘旋时，我想要徽章旋转，2'蓝条'从scale.png后面突出的比例增加。

非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        #spiral{
            border-radius: 50%;
            background-image: url(badge.png);
            position: absolute;
            top: 50%;
            left: 50%;
            width: 350px;
            height: 350px;
            transition:all 1s ease-out;

            transform:rotate(0deg) infinite;
            -webkit-transform:rotate(0deg) infinite; 
            -moz-animation: rotate(0deg) infinite;  
            -ms-animation: rotate(0deg) infinite;
            -o-animation: rotate(0deg) infinite;
            animation: rotate(0deg) infinite;/* Safari and Chrome */
            }


        #spiral:hover, #blueBar.hovered  {
            display: block;
            width:350px;
            height:350px;
            border-radius: 50%;
            background-image: url(badge.png);
            -webkit-animation: spin 1s linear infinite;
            -moz-animation: spin 1s linear infinite;  
            -ms-animation: spin 1s linear infinite;
            -o-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            }


        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
            }
        @-webkit-keyframes spin {
            0% {-webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
            }
        @-ms-keyframes spin {
            0% {-ms-transform: rotate(0deg); }
            100% { -ms-transform: rotate(360deg); }
            }
        @-moz-keyframes spin {
            0% { -moz-transform: rotate(0deg); }
            100% { -moz-transform: rotate(360deg); }
            }
        @-o-keyframes spin {
            0% { -o-transform: rotate(0deg); }
            100% { -o-transform: rotate(360deg); }
            }



        #blueBar  {
            width: 28px;
            height: 28px;
            background: #25cadb;

            -moz-transform: rotate(45deg); 
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            }

        #blueBar:hover, .blueBar.hover{
            width: 28px;
            height: 28px;
            background: #25cadb;

            -moz-transform: rotate(45deg) scale(1, 10);
            -webkit-transform: rotate(45deg) scale(1, 10);
            -ms-transform: rotate(45deg) scale(1, 10);
            -o-transform: rotate(45deg) scale(1, 10);
            transform: rotate(45deg) scale(1, 10);
            }
</style>
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8">

    <title>Animated Features</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="almost.ico" type="image/x-icon">

</head>

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">

            <center>

                <div style="height: 350px">&nbsp;</div>
                    <script>
                        $('#spiral').on('mouseenter mouseleave', function(e) {
                        $('#blueBar:hover').trigger(e.type);
                        })
                    </script>
                <div width="800px">

                <div id="spiral">   
                    <div id="spiral1"> 

                    </div>
                </div>

                <div id="blueBar" > &nbsp; </div>

                </div>

        </center>
    </body>
</html>

Answer 1

您可以使用兄弟选择器。

#spiral:hover ~ #blueBar {
    background: red;
}

<{>} #blueBar在#spiral悬停时会变红。

您可以看到示例on JSFiddle here。将鼠标悬停在＆＃34;螺旋＆＃34; div并注意到＆＃34;蓝条＆＃34; div变红了。

Answer 2

如果元素不会像詹姆斯·蒙格的答案那样永远是兄弟姐妹，那么你可以在你的#blueBar中转移CSS：hover到一个名为.hover的类。然后，在你的JQuery中你会写：

$('#spiral').on('mouseenter mouseout', function(){
    $('#blueBar').toggleClass('hover');
});

小提琴：https://jsfiddle.net/xk9ckcrk/2/

我稍微修改了CSS，以便更容易地显示正在发生的事情。您应该能够将所需的动画和转换添加到.hover类并使其正常工作。

如何从另一个Div（具有复杂属性）触发CSS悬停

2 个答案: