0

当鼠标悬停在按钮上时，我正在尝试更改按钮的文本颜色
这是我的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
}
4

6 回答 6

3

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

你只需要注意选择器的特殊性

另外，总是尽量避免!important。它旨在清除作者和用户样式表之间的冲突，而不是修复您凌乱的 CSS！

请参阅此示例以查看您的代码是否正常工作。

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

.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

一切正常。

于 2012-05-25T08:26:08.433 回答
3

因为您的文本在更高的特异性顺序内，所以在您的 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;
}
于 2012-05-25T08:16:50.543 回答
2

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

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

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'));
    });
});
于 2012-05-25T08:22:03.910 回答
1

工作演示 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');
    });
});​
于 2012-05-25T08:15:46.223 回答
1

要更改 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');
  }
);
于 2012-05-25T08:17:48.357 回答
1 
$('.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;
}

演示

于 2012-05-25T08:21:17.623 回答