javascript - 如何从另一个 Div 触发 CSS 悬停(具有复杂的属性)-6ren

javascript - 如何从另一个 Div 触发 CSS 悬停(具有复杂的属性)

转载作者：行者123 更新时间：2023-11-30 16:00:16

我是新手，希望我的提问礼貌/正确？!(我已经在下面包含了到目前为止的代码。)

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

最终结果是我希望在 Badge.png 后面有 2 个“blueBars”相互交叉。将鼠标悬停在“螺旋”上后，我希望徽章旋转，并且从 badge.png 后面突出的 2 个“blueBars”比例增加。

非常感谢。

<!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>

最佳答案

您可以使用兄弟选择器。

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

#blueBar 将在 #spiral 上悬停时变为红色。

你可以看一个例子on JSFiddle here .将鼠标悬停在“螺旋”div 上，注意“蓝色条”div 变为红色。

关于javascript - 如何从另一个 Div 触发 CSS 悬停(具有复杂的属性)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37883301/

文章推荐： c - 指向传递给函数的结构的指针

文章推荐： objective-c - 具有整数的数组的数组

文章推荐： c - 使用驱动程序 Hook 网络功能，高级概述？

文章推荐： c# - LINQ 多对多在哪里

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何从另一个 Div 触发 CSS 悬停(具有复杂的属性)