html - ボタンにカーソルを合わせてもテキストの色は変更できません

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
}

score 3 · Accepted Answer

あなたのテキストはより高い特異性の中にあるので、あなたの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;
}

score 3 · Accepted Answer

まず第一に：これには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

そして、すべてが正常に動作します。

score 2 · Accepted Answer

Tats_innitのソリューションの最新情報は次のとおりです。2つの改善：

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

score 1 · Accepted Answer

作業デモ 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');
    });
});

score 1 · Accepted Answer

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

score 1 · Accepted Answer

$('.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;
}

デモ

html - ボタンにカーソルを合わせてもテキストの色は変更できません

6 に答える 6

Related

Reference