CODEWITHSUNDEEP
cssanimationbutton
Dann
Dann

Reputation: 87

Animation triggered by animation on hover using CSS

I'm trying to trigger some other buttons (items) to scroll on object7:hover from the 'Add' button (object7), but it won't seem to trigger it anyways. I'm trying to avoid the use of JavaScript, using only HTML and CSS. The code that I've got can be found here

Any suggestions?

Edit: Perhaps I wasn't clear enough, this is how it should go:

The user hovers 'Settings' => All the items slide from behind 'Settings' => User hovers 'Add'=>

=> Items slide down from behind the 'Add' button

Upvotes: 3

Views: 470

Answers (1)

Andrew Grothe
Andrew Grothe

Reputation: 2374

I believe your issue is that the button won't respond to the hover event.

If you use spans instead, it seems to work. Here is a fiddle that demonstrates. I didn't bother to get all the elements lined up properly, but you can see the "New" span move as you hover over the "Add" span, which is what I believe you are trying to achieve.

<div class="container">
<span class="set">
    <span class="object1">Start</span >
    <span class="object2">Stop</span >
    <span class="object3">Play</span >
    <span class="object4">Pause</span >
    <span class="object5">More</span >
    <span class="object6">Info</span >
    <span class="object7">Add
         <span class="object8">New</span >       
    </span >
    <span class="default">Settings</span >
    </span>
</div>

​Edit: div element also works, as do probably others. Seems like the button element is the issue maybe? Unsure as a google search implies any element is valid with the hover pseudo selector, but the button certainly wasn't working in my version of Chrome.

Upvotes: 1

Related Questions