Make DIV highlight when image is hovered - how?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Make DIV highlight when image is hovered - how?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

What does the structure look like? What specifically is meant to be highlighted when an image is hovered over?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

It's loading after jQuery and once DOM is loaded?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Sorry what do you mean?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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>
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Bingo - can adapt that nicely. Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply