Search jQuery

jQuery Forum

text color change on mouseover. plus others.

in Using jQuery • 10 years ago

I am extremely new to jquery, or most code for that matter, I want to have the text change colors once a user has mouseover/hover the text. In a perfect world, it would also .show() a <dd> description on the mouseover, then .onClick function, it would start a .show(slow) event on a div with content related to the mainTitle++.

I have 6 divs that will have an id that I'm calling "mainTitle01" (thru 06) and will each reveal their own div. I have searched the web looking for tutorials and examples that can help me through each element. I have made everything work individually except the text color on mouseover, and the display of the discriptions under each mainTitle++. I know I will have issues tring to get all this to work together once I start to assemble the code, but once it all works, it will be worth the pain.

I hate to ask for help, but I feel my computer might have an unfortunate sudden stop after a violent change in velocity if I continue to fail! LOL.

Any help would be appreciated. Thanks.

Replies(6)

kbwood.au

Re: text color change on mouseover. plus others.

10 years ago

To easily affect several related elements you should add a common class to them, e.g. class="mainTitle".

To change the colour it would be better to add/remove a class that has the desired styling attached:

div { color: black; }
div.changeColor { color: red; }
$('div.mainTitle').hover(function() {
$(this).toggleClass('changeColor');
});

Assuming that your content divs immediately follow your title divs, you could show them when clicked like this:

$('div.mainTitle').click(function() {
$(this).next('div').show();
});

awmartin

Re: text color change on mouseover. plus others.

10 years ago

Thanks KBWood, I do have to have each title set to a different color, but didnt think of having the content divs directly after the title div and using functions (this) and .next and just keeping them inline. That should save some code-ache!

I am getting a syntax error on div {color: black;}**

**Never mind, im an idiot this evening... I got it now. They say <Style></style> is everything! LOL

Thanks again for taking the time to educate. Not just me, but every post you reply to.

awmartin

Re: text color change on mouseover. plus others.

10 years ago

Now I am having trouble with the suggestion code you have provided. I don't think I'm putting it in the right spot. I had this figured out via a different route that had the open content div .hide() as the called content div was made active.
I'm going to back track that solution an then see if I cant get that working.

Thanks again.

awmartin

Re: text color change on mouseover. plus others.

10 years ago

OK, In summery, this is what I came up with...(I know this code might be ugly, but it works and its my first complete code!)

For the color change. Each color had to have its own class in the CSS. the script went as follows:
__________________________________________

<body>
<div id="logoHole1"></div>

<div class="mainTitle01" id="expus">EXPERIENCE US</div>
<div class="cont01" id="expusCont1">
I love this city!</div>

<script>
    $('#expus').hover(function() {
          $(this).toggleClass('changeColor1');
    });

</script>

<div class="mainTitle02" id="create">CREATE</div>
<div class="cont02" id="createCont1">
I love to create!</div>

<script>
    $('#create').hover(function() {
          $(this).toggleClass('changeColor2');
    });
</script>

<div class="mainTitle03" id="innov">INNOVATIVE</div>
<div class="cont03" id="innovCont1">
I love to innovate!</div>
<script>
    $('#innov').hover(function() {
          $(this).toggleClass('changeColor3');
    });
</script>

<div class="mainTitle04" id="engage">ENGAGE</div>
<div class="cont04" id="engageCont1">
I love to engage!</div>
<script>
    $('#engage').hover(function() {
          $(this).toggleClass('changeColor4');
    });
</script>

<div class="mainTitle05" id="huheard">HAVE YOU HEARD</div>
<div class="cont05" id="huheardCont1">
I love to hear!</div>
<script>
    $('#huheard').hover(function() {
          $(this).toggleClass('changeColor5');
    });
</script>

<div class="mainTitle06" id="connect">CONNECT</div>
<div class="cont06" id="connectCont1">
I love to connect!</div>
<script>
    $('#connect').hover(function() {
          $(this).toggleClass('changeColor6');
    });
</script>

___________________________________
Next I needed to have the the content divs appear when the title divs were clicked, but only have 1 open at a time. I had achieved this by telling the opening div that if there is any other open content div, to hide it. And to spice it all up, I added a 1sec animation to the .hide() & .show().
I hope this helps somebody.
Here is the code for the animated content divs:
___________________________________

<script src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $('div.cont01').hide();
       $('div.cont02').hide();
       $('div.cont03').hide();
       $('div.cont04').hide();
       $('div.cont05').hide();
       $('div.cont06').hide();

       $('div.mainTitle01').click(function() {
        $('#expusCont1').show(1000);
        if(".cont02,.cont03,.cont04,.cont05,.cont06 = .show");
           {$(".cont02,.cont03,.cont04,.cont05,.cont06").hide(1000)};
       });
       $('div.mainTitle02').click(function() {
        $('#createCont1').show(1000);

        if(".cont01,.cont03,.cont04,.cont05,.cont06 = .show");
           {$(".cont01,.cont03,.cont04,.cont05,.cont06").hide(1000)};
       });
       $('div.mainTitle03').click(function() {
        $('#innovCont1').show(1000);

        if(".cont01,.cont02,.cont04,.cont05,.cont06 = .show");
           {$(".cont01,.cont02,.cont04,.cont05,.cont06").hide(1000)};
       });
       $('div.mainTitle04').click(function() {
        $('#engageCont1').show(1000);

        if(".cont01,.cont02,.cont03,.cont05,.cont06 = .show");
           {$(".cont01,.cont02,.cont03,.cont05,.cont06").hide(1000)};
       });
       $('div.mainTitle05').click(function() {
        $('#huheardCont1').show(1000);

        if(".cont01,.cont02,.cont03,.cont04,.cont06 = .show");
           {$(".cont01,.cont02,.cont03,.cont04,.cont06").hide(1000)};
       });
       $('div.mainTitle06').click(function() {
        $('#connectCont1').show(1000);

          if(".cont01,.cont02,.cont03,.cont04,.cont05 = .show");
           {$(".cont01,.cont02,.cont03,.cont04,.cont05").hide(1000)};
       });
   });
</script>

jDev

Re: text color change on mouseover. plus others.

10 years ago

hey guys,

i would here say a message to every one : "Please don't use jQuery when you could get the same effect with CSS"

for the hover effect : Changing text color and dd showing , you can just use the CSS :hover pseudo-class

but for the click event yes you can use jQuery

http://learn-jquery.net

awmartin

Re: text color change on mouseover. plus others.

10 years ago

Thanks DASH. I was looking into that for the <dd>, but didn't know about it when I was doing the color change on hover. The code for this site is really lean, but if I can get it cleaner, Ill try. For now, I just want to see it go live. Besides, I'm sure there will be someone changing stuff around. There always is!

Thanks again
kbwood.au & learnDASH.

Top Reply

Response title

Attachments

jQuery Forum

text color change on mouseover. plus others.

Replies(6)

Re: text color change on mouseover. plus others.

Re: text color change on mouseover. plus others.

Re: text color change on mouseover. plus others.

Re: text color change on mouseover. plus others.

Re: text color change on mouseover. plus others.

Re: text color change on mouseover. plus others.

Statistics

Tags

Actions