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.