Page 1 of 1

Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 9:55 am
by simonmlewis
I need a simple little bit of JS so that when an image is hovered by the mouse, a separate DIV background is light up.

I'm not sure what I am looking for online to do this. It's bound to be easy, but I cannot quite see how to do it. I guess it's done with IDs, but not sure.

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:31 am
by Celauran

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:37 am
by simonmlewis
I don't think that is quite it.
There are three sections I need to have DIVS that highlight when you hover over the image. Three images - one per DIV.
I thought it would be possible with CSS, but that JS would be most ideal.

I don't think I can see how it would work, using that page's content, sorry.

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:39 am
by Celauran
What does the structure look like? What specifically is meant to be highlighted when an image is hovered over?

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:41 am
by simonmlewis
Three images are on the left in a floating DIV.

There are various paragraphs on the right in the second floating DIV.

When an image like the Facebook logo is hovered over, it shows a light grey border - I want the Paragraph about Facebook on the right to be highlighed (I'd assume it would be in a DIV with an ID).

Same goes for three other images, with more to possible add.

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:42 am
by simonmlewis
My theory was is something like this:
<a href='#' onmouseover(highlight id2), on mouseout (disable highlight);.
<div id='id2'>Facebook is cool</div>

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 10:51 am
by Celauran

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:00 am
by simonmlewis

Code: Select all

<script>
$('#trigger').hover(
    function() {
        $('#target').css('background-color', '#F00');
    },
    function() {
        $('#target').css('background-color', '#FFF');
    }
);
</script>
<style>
#target {
    border: 1px solid #000;
    height: 200px;
    width: 200px;
}

#trigger {
    border: 1px solid #000;
    height: 80px;
    width: 300px;
}
</style>

<div id="target">Target</div>
<div id="trigger">Trigger</div>
This doesn't work for me. Am I missing something?

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:01 am
by Celauran
It's loading after jQuery and once DOM is loaded?

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:03 am
by simonmlewis
Sorry what do you mean?

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:07 am
by simonmlewis

Code: Select all

<style>
#target {
    border: 1px solid #000;
    height: 200px;
    width: 200px;
}

#trigger {
    border: 1px solid #000;
    height: 80px;
    width: 300px;
}
</style>

<div id="target">Target</div>
<div id="trigger">Trigger</div>
<script>
$('#trigger').hover(
    function() {
        $('#target').css('background-color', '#F00');
    },
    function() {
        $('#target').css('background-color', '#FFF');
    }
);
</script>

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:12 am
by Celauran

Code: Select all

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#trigger').hover(
        function() {
            $('#target').css('background-color', '#F00');
        },
        function() {
            $('#target').css('background-color', '#FFF');
        }
    );
});
</script>

Re: Make DIV highlight when image is hovered - how?

Posted: Tue Apr 01, 2014 11:16 am
by simonmlewis
Bingo - can adapt that nicely. Thanks.