ボタンのスタイルとホバーのスタイルを制御できません

Question

ボタンの背景色とホバーの状態を変更しようとしていました。この時点までは、インラインでボタンをスタイリングしていたのですが、ボタンのホバー状態を制御できませんでした。私はまた、以下のコードに見られるように、重要なボタンを置いてみましたが、うまくいきませんでした。私は正しいセレクターをターゲットにしていると確信しているので、背景色が変わらない理由はわかりません。

<style> 

    @media(max-width: 800px){ 

     .hidden-el{ 
      display: none; 
     } 
     .show-more-content-div{ 
      height: 33px; 
      margin-bottom: 20px; 
      text-align: center; 
     } 
     a#showMoreContent.button{ 
      background-color: #428071!important; 
      background-image: -webkit-linear-gradient(top,#428071,#035642); 
     } 
     a#showMoreContent.button:hover{ 
      background-color: -webkit-linear-gradient(top,#428071,#035642); 
      background-image: #428071; 
     } 

    } 

</style> 
<script> 

    var $title      = $('h1.wrapper').first();              //get the title 
    var $secondToLastRow   = $('.row').eq(-2);                //get the second to last row 
    var $firstParagraphAfterTitle = $title.nextAll().find('p').first();           //get the first paragraph after the title 

    var $start      = $firstParagraphAfterTitle.parents('.group.divider');       //determine the start of where to start hiding 
    var $end      = $secondToLastRow.parents('#content_mainholder'); //determine the end of where to start hiding 

    var arrOfElsToBeHidden   = $start.nextUntil($end);              //grab everything to be hidden and dump into an array 

    $(arrOfElsToBeHidden).each(function(){                   //loop through and add a hide class to each element to be hidden 
     $(this).addClass('hidden-el') 
    }); 

    var showMoreContent = [ 
     '<div class="show-more-content-div">', 
     '<a href="#" class="button" id="showMoreContent">', 
     'Show More Content', 
     '</a>', 
     '</div>' 
    ].join("");                          //created the show more content button 

    $(showMoreContent).insertAfter($firstParagraphAfterTitle); 

    $('#showMoreContent').on('hover', function(){ 
     console.log('hovered'); //works 
    }); 

</script> 

Answer 1

私はあなたがbackground-colorとあなたの:hover擬似セレクタで転置background-imageを持っていると思います。これとグラデーションの値は同じです。私は値を修正し、ホバー状態のための勾配を逆転させてきたここで簡体字版：

a#showMoreContent.button{ 
 
    background-color: #428071; 
 
    background-image: -webkit-linear-gradient(top,#428071,#035642); 
 
    padding: 20px; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 
a#showMoreContent.button:hover{ 
 
    background-color: #428071; 
 
    background-image: -webkit-linear-gradient(top,#035642,#428071); 
 
}

<a id="showMoreContent" class="button">Show more content</a>

Answer 2

のすべての応答のおかげで、私はそれは、追加のクラスを追加することによって動作するようになってしまいましたリンクにボタンを押します。私はそれを「show-more-content」と呼び、ロバート・ウェイドのレスポンスでスタイリングし、それがうまくいった。私が使っていた元のセレクターがなぜ機能しなかったのか理解できていませんが、セレクターを追加して、すべてが期待どおりに見えるようにしなければならなかったと思います。