CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kieran Stafford
Kieran Stafford

Reputation: 11

How can I trigger a CSS hover from another Div (with complicated attributes)

I'm new to this and hope I'm asking politely/correctly?! (I have included the code I have so far below.)

I am trying to apply the hover of the '#blueBar' by hovering over the '#spiral' div. I've tried using CSS, JQuery and Javascript for some time, but to no avail.

The end result is I'd like to have 2 'blueBars' crossing each other behind the Badge.png. Upon hovering over the 'spiral' I'd like the badge to spin and the 2 'blueBars' increase in scale protruding from behind the badge.png.

Many thanks.

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

Upvotes: 1

Views: 82

Answers (2)

Cruiser
Cruiser

Reputation: 1616

If the elements won't always be siblings as in James Monger's answer, you could transfer the CSS in your #blueBar:hover to a class called .hover. Then, in your JQuery you'd write:

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

Fiddle: https://jsfiddle.net/xk9ckcrk/2/

I modified the CSS a bit to show more easily what's going on. You should be able to add whatever animations and transformations you want to the .hover class and have it work.

Upvotes: 1

James Monger
James Monger

Reputation: 10665

You can use the sibling selector.

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

#blueBar will become red when #spiral is hovered over.

You can see an example on JSFiddle here. Hover over the "spiral" div and notice that the "blue bar" div becomes red.

Upvotes: 1

Related Questions