Multiple rollover states in Dreamweaver?
- Started
- Last post
- 15 Responses
- matski
I've did a bit of searching around and can't find how to make multiple rollover states function properly in Dreamweaver.
I have a webpage with two sets of navigation. One with 'tiltes/headings' (topline) and another with icons (sub). Both relate to each other.
What I'm trying to do is link the corresponding title and icon so that when either is rolled over BOTH highlight. And when roll out both return to their respective Roll Out states.
Any idea's?
- HAYZ1LLLA0
Might need to double up on the "behaviours".
So do a conventional rollover. Then do another one on the same image for the other rollover to change. Don't know if it 'll work.Or label both the images with the same id name and do a conventional rollover. rty that.
- matski0
I have tried doubling up on the 'behaviours' and doesn't seem to work.
I will try the same id name.
- matski0
Okay, using the same id name just cancels each other out and nothing happens.
- ukit20
The problem is that you are using Dreamweaver. It would be easy with regular JavaScript.
- animatedgif0
Shouldn't really be doing it that way in 2012.
Learn jQuery and this is ridiculously simple, you'd do something like give both of them a class that styled the same as each of their hover states in CSS and add/remove that class to the other element on roll over/off.
- uan0
could be done with css only.
CSS selector :hover
http://www.w3schools.com/cssref/…
- vaxorcist0
this can be done really easily in a bit of code.... or maddeningly in DW....
css class is your friend....
- orrinward20
Add common class items to both sets of menu items and use jQuery to highlight them all on hover.
<div class="blue red green"></div>
<div class="red"></div>$('.red').mousenter(function(){
$('.red').addClass('highlight');
});
- orrinward20
http://jsfiddle.net/orrinward/a8…
ernex will come in and show the elegant way... hopefully...
The clever way would be write one function that targets the 'item' class and toggle 'highlight' for items with a similar set of classes.
- ItalianStallion0
CSS all the way...
- orrinward20
ItalianStallion, I can't think of a way to achieve what this person wants in just CSS. Mind elaborating on how you'd do it?
He's requesting for the ability to hover on one item and have an unrelated (DOM-wise) item change. I understand how to do this with child/sibling css selectors but not distant-relatives. I would love to know how to do this with CSS as well if it's possible.
- 74LEO0
check out k10k they have an animated gif rollover easy to do
- bulletfactory0
disjointed rollover
- zarkonite0
<div class="container">
<div class="itemOne"></div>
<div class="itemTwo"></div>
</div>.container:hover .itemOne {CSS}
.container:hover .itemTwo {CSS}
- albums0
a.red:hover {color:#FF0000;}
a.blue:hover {color:#0000FF;}<a class="red" href="truth">painful</a>
<a class="blue" href="ignorant">bliss</a>