JavaScript Question

Posted on 2011-10-16
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:

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
    LVL 18

    Expert Comment

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

    I've tried that already, as you may be able to see.  But I'd like to mimic the effect of 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

    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

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

    Expert Comment

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

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Join & Write a Comment

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    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 Browse or search based on font properties or name to find a suitable font for…

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now