JavaScript Question

Posted on 2011-10-16
Medium Priority
Last Modified: 2012-05-12
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!!

Question by:jameshuckabone
  • 3
  • 2
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 36976083
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.

Author Comment

ID: 36976282
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.
LVL 18

Accepted Solution

Sudaraka Wijesinghe earned 2000 total points
ID: 36977717
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.

Author Closing Comment

ID: 36979956
Thank you so much for the great starting point!!!
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 36980217
Glad to help. Thanks for the points.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question