JavaScript Question

I am making a strip of boxes (divs) that go across the entire width of the browser window.   I'd like to apply styles to several elements in each div as soon as the user mouses over any part of the box.  My test page is located at: http://newspainwines.com/test/

Can someone get me started using the current styles/structure of my test page?

So I imagine the JavaScript looking like:

if ((hovered over any of the elements in the box) element 1 || element 2 || element 3 || element 4){
element 1.backgroundcolor = #333333 && element 2.color = #ffffff, etc.
}

Thank you!!

jameshuckaboneAsked:
Who is Participating?
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
CSS is able to mimic the effects you showed there on the sample site, how ever for smoother effect you will have to use jQuery.
CSS3 may have transition effects similar to jQuery, which I'm not up to the speed on.

Please see the attached samples I have prepared based on your code.
test-css.htm
test-javascript.htm
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
If it's only changing colors you need, I suggest you implement it only with CSS using :hover psudo style.

And, if you need to do more you can use jQuery to get more flexibility and effects.
http://docs.jquery.com/UI/Effects
0
 
jameshuckaboneAuthor Commented:
I've tried that already, as you may be able to see.  But I'd like to mimic the effect of http://bigyouth.fr/#/Reference/ and it seems to be impossible with just css.  I thought that a little JavaScript could change the div border, background-color, text color, as well as invert the smaller button to it's over state, no matter where the mouse was situated within the box.
0
 
jameshuckaboneAuthor Commented:
Thank you so much for the great starting point!!!
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.