CODEWITHSUNDEEP
htmlcss
Suresh Pattu
Suresh Pattu

Reputation: 6209

Text color can't change when hover a button

I am trying to change the text color of the button when mouse over a button
here is my Jsfiddle

My Html Is 

<div id="groups_landingpage_contentdiv">        
    <div class="groups_landingpage_contentdiv_image">
        <img src="http://i.imgur.com/F1s05.png" width="150" />
    </div>
    <div class="groups_landingpage_contentdiv_text">
        <h2>Welcome To Rang De Group</h2>
        <p>RDBO conducts free screenings of rare, socially relevant 
           documentaries and films for the general public and corporate audiences.  
            <button class="landingpage_create_group_button">
                <span class="sprite_16x16_group_icon_with_circleback fl mar5"></span>
                <p>Create A Group</p>
            </button>
        </p>
    </div>            
    <div class="clearfloat"> </div>
</div>`

My Css Is 

.sprite_16x16_group_icon_with_circleback {
    background:transparent url(http://i.imgur.com/On0lt.png) no-repeat 0 0;
    background-position:-250px -524px;
    height:34px;
    width:41px
}

.fl {
    float:left
}

.mar5 {
    margin:5px
}

#groups_landingpage_contentdiv {
    float:left;
    width:727px;
    padding:0 0 20px!important
}

.groups_landingpage_contentdiv_image {
    float:left;
    width:35%;
    padding:25px 0 0 20px
}

.groups_landingpage_contentdiv_text {
    float:left;
    width:55%;
    text-align:justify;
    padding:20px 0 0
}

.groups_landingpage_contentdiv_text h2 {
    color:#628e0e;
    font:11pt/22pt Arial, Helvetica, sans-serif;
    font-weight:600;
    padding:0 0 10px
}

.groups_landingpage_contentdiv_text p {
    color:#404040;
    font:9pt/16pt Arial, Helvetica, sans-serif;
    padding:0
}

.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p {
    font-size:11pt;
    font-weight:600;
    color:#000;
    line-height:18px;
    cursor:pointer;
    text-shadow:1px 1px 0 white;
    padding:9px 0 0!important
}

.landingpage_create_group_button {
    background:#F8F8F8;
    color:black;
    font-weight:bold;
    font-size:10pt;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    line-height:17px;
    cursor:pointer;
    text-shadow:1px 1px 0 white;
    width:200px;
    margin-top:10px;
    padding:0 7px 3px
}

.landingpage_create_group_button:hover {
    background:#9ABA3B;
    color:#fff!important;
    text-shadow:1px 1px 0 #6F862A
}

.landingpage_create_group_button:hover.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p {
    color:#fff!important;
    text-shadow:1px 1px 0 #6F862A
}

Upvotes: 0

Views: 4838

Answers (6)

Christoph
Christoph

Reputation: 51191

First of all: You dont need javascript/jquery for this!! (And please don't do it, because that's a lot of uneccessary work)

You just have to watch out for selector specifity

Also, always try to avoid !important. It is meant to clear conflicts between author and user stylesheets, not to fix your messy CSS!

See this example see your code working.

I just reduced the specifity of your initial selector from:

.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p

to

.landingpage_create_group_button p

and changed your hover selector from

.landingpage_create_group_button:hover.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p

(what the heck is this) to 

.landingpage_create_group_button:hover p

and everything works fine.

Upvotes: 3

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/2fBjJ/ or http://jsfiddle.net/2fBjJ/4/ (courtsey @NiftyDude)

Text Color change Demo http://jsfiddle.net/2fBjJ/8/ or http://jsfiddle.net/2fBjJ/10/

On hover your text will change in the button and on mouse out it will set back to normal.

Hope this helps, let me know if I missed anything!

code

   $(document).ready(function() {
        $('.landingpage_create_group_button p').hover(function() {

            $(this).text('Changed on mouseover');

        }, function() {
            $(this).text('Create A Groups');
        });
    });​
​

code

$(document).ready(function() {
    $('.landingpage_create_group_button').hover(function() {

        $(this).find('p').text('Changed on mouseover');

    }, function() {
        $(this).find('p').text('Create A Groups');
    });
});​

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

$('.landingpage_create_group_button').hover(function() {
    $('p', this).text(function(i, oldText) {
        return oldText == 'Create A Group' ? 'mouse hover' : 'Create A Group';
    });
});

And to change the color try this css:

button.landingpage_create_group_button:hover p {
    color: #fff !important;
}

DEMO

Upvotes: 1

Jochem
Jochem

Reputation: 2994

Here's an update on Tats_innit's solution. Two improvements:

  1. Hover on div, but change text of p
  2. Store old text value to prevent 'information' duplication

jsfiddle

$(document).ready(function(){
    $('.landingpage_create_group_button').hover(function(){
           if ( ! $(this).data('oldtext') ) $(this).data('oldtext', $('p', this).text()) ;
           $('p', this).text('Changed on mouseover');
    },function(){
        $('p', this).text( $(this).data('oldtext'));
    });
});

Upvotes: 2

s.webbandit
s.webbandit

Reputation: 17000

To change text of DOM element (in your case button) you should use javascript. jQuery fits well.

For example:

$(".landingpage_create_group_button").hover(
  function () {
    $(".landingpage_create_group_button > p").html('one');
  }, 
  function () {
    $(".landingpage_create_group_button > p").html('Create A Group');
  }
);

Upvotes: 1

Andreas Wong
Andreas Wong

Reputation: 60516

Because your text is inside a higher order of specificity, add the rule in your css:

http://jsfiddle.net/yQEQJ/2/

/** This takes effect, overriding the 
    text color inside your button, since its' wrapped in p 
**/
.landingpage_create_group_button:hover.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p
{
    color: #fff !important;
    text-shadow: 1px 1px 0px #6F862A;
}

/** add this rule **/
button.landingpage_create_group_button:hover p {

    color: #fff !important;
}

Upvotes: 4

Related Questions