Use CSS rule on Mouse hover

Question

I have a dial that moves automatically, and I would like to figure out a way to have it move only when the mouse hovers over the div. I have read that it may not be possible to do this in javascript, but I am hoping some one here might have a solution.

Here is what I have so far. https://jsfiddle.net/r0w71wkv/

#logo {
    display: inline-block;
    position: relative;
}
#logo .speedometer {
    width: 80px;
    height: 80px;

}
#logo .needle {
    width: 5px;
    height: 80px;
    background: #324A90;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    display: inline-block;
    left: 110px;
    position: absolute;
    top: 10px;
    -webkit-animation:move 5s infinite;
    transform:rotate(0deg);
    transform-origin:bottom;
}
@-webkit-keyframes move {
    0% {
        transform:rotate(-180deg);
    }
    50% {
        transform:rotate(90deg);
        }
    100% {
        transform:rotate(-180deg);
    }
}

toastrackengima · Accepted Answer · 2016-02-09 18:40:47Z

2

:hover Psudeoclass

Only active when the element preceding it is being hovered.

Using :hover:

#logo .needle:hover {
    -webkit-animation:move 5s infinite;
    animation:move 5s infinite;
}

Then get rid of the -webkit-animation that you have currently. This will play the move animation only when you hover over the .needle element in #logo.

Also, you don't need to prefix animation much anymore: http://caniuse.com/#search=css%20animation

Here's a fiddle: https://jsfiddle.net/r0w71wkv/5/.

I might note that you could be better off first setting the width and the height of the #mainwrap div, and then using #mainwrap:hover .needle, because that way the user doesn't have to hover directly over the needle. This would like: https://jsfiddle.net/r0w71wkv/6/.

edited Feb 9, 2016 at 18:40

answered Feb 9, 2016 at 18:24

toastrackengima

9,0995 gold badges55 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2168066 Over a year ago

I have tried using .needle:hover, but I just lose the animation all together. Same when I lose the webkit.

toastrackengima Over a year ago

@user2168066 Try using jsfiddle.net/r0w71wkv/7. I think the problem is that you have to hover exactly over the needle with the other approach, when this in fact defines an 80px by 80px area where you can hover to play the animation.

user2168066 Over a year ago

Ok I see now, the problem was having to hover directly over the specific div, thanks for the help.

Collectives™ on Stack Overflow

Use CSS rule on Mouse hover

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related