PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Sep 22, 2018 12:56 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 13 posts ] 
Author Message
PostPosted: Tue Apr 01, 2014 9:55 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:31 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
$('img').hover()?


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:37 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:39 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
What does the structure look like? What specifically is meant to be highlighted when an image is hovered over?


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:41 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:42 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:51 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
Not what you meant?


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:00 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:01 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
It's loading after jQuery and once DOM is loaded?


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:03 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
Sorry what do you mean?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:12 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
Syntax: [ Download ] [ Hide ]
<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>


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:16 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4422
Location: United Kingdom
Bingo - can adapt that nicely. Thanks.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group