Make DIV highlight when image is hovered - how?
Moderator: General Moderators
-
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?
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.
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.
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?
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.
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.
All the best from the United Kingdom.
Re: Make DIV highlight when image is hovered - how?
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?
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.
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.
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?
My theory was is something like this:
<a href='#' onmouseover(highlight id2), on mouseout (disable highlight);.
<div id='id2'>Facebook is cool</div>
<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.
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?
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Make DIV highlight when image is hovered - how?
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?
Sorry what do you mean?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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?
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.
All the best from the United Kingdom.
Re: Make DIV highlight when image is hovered - how?
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?
Bingo - can adapt that nicely. Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.