Question

当我将鼠标悬停在按钮上时，我正在尝试更改按钮的文字颜色此处我的Jsfiddle

我的Html

<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>`

我的Css

.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
}

Answer 1

由于您的文字位于更高的特异性内，请在您的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;
}

Answer 2

首先：你不需要javascript / jquery！（并且请不要这样做，因为这是很多不必要的工作）

您只需要注意selector specifity

此外，请始终尽量避免使用!important。它旨在清除作者和用户样式表之间的冲突，而不是修复乱糟糟的CSS！

请参阅this example，查看您的代码是否有效。

我只是减少了初始选择器的特性：

.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p

到

.landingpage_create_group_button p

并从

更改了悬停选择器

.landingpage_create_group_button:hover.groups_landingpage_contentdiv_text p button.landingpage_create_group_button p

（这到底是什么）

.landingpage_create_group_button:hover p

一切正常。

Answer 3

这是Tats_innit解决方案的更新。两项改进：

将鼠标悬停在div上，但更改p
存储旧文本值以防止“信息”重复

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'));
    });
});

Answer 4

工作演示 http://jsfiddle.net/2fBjJ/ 或 http://jsfiddle.net/2fBjJ/4/（courtsey @NiftyDude）

文字颜色变化演示 http://jsfiddle.net/2fBjJ/8/ 或 http://jsfiddle.net/2fBjJ/10/

悬停时，您的文字会在按钮中发生变化，鼠标移开后它会恢复正常。

希望这会有所帮助，如果我错过了什么，请告诉我！

<强>码

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

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

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

<强>码

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

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

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

Answer 5

要更改DOM元素的文本（在您的案例按钮中），您应该使用javascript。 jQuery很合适。

例如：

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

Answer 6

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

要改变颜色，试试这个css：

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

<强> DEMO

悬停按钮时文本颜色无法更改

6 个答案: