無法控制按鈕樣式和懸停樣式

我正在嘗試更改按鈕的背景顏色和懸停狀態。直到這一點之前，唯一的事情是內聯樣式化按鈕，但之後我無法控制按鈕的懸停狀態。我也嘗試把按鈕放在重要的位置上，如下面的代碼所示，但那不起作用。我確定我的目標是正確的選擇器，所以我不確定背景顏色爲什麼沒有改變。無法控制按鈕樣式和懸停樣式

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

來源

2016-09-08 user6810289

html代碼在哪裏？賦予我們權力。給我們一切我們需要幫助你。實際上，你可以忽略javascript並提供它呈現的html代碼。然後，我們可以檢查元素，驗證您的規則實際上是否正在工作，否則，被另一個更具體的規則過分限定。可以肯定地說，如果你在自然狀態規則上有'！important'聲明，那麼無論你聲明懸停狀態如何，都將被過分限制 - 除非你爲該規則聲明'！important'。 – UncaughtTypeError

你的CSS完全錯了 – empiric

我認爲你有background-color和background-image在:hover僞選擇調換。這和你的梯度值是相同的。這裏的簡化版本，我已經糾正的價值觀和轉回懸停狀態的梯度：

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>

來源

2016-09-08 17:09:03

感謝所有的答覆，我最終得到它通過添加附加類工作到按鈕的鏈接。我打電話給它，然後用羅伯特韋德的回答來表達它的內容，並且它很有效。仍然不理解爲什麼我使用的原始選擇器不起作用，但我想我必須添加一個選擇器才能使所有內容都按預期顯示。

來源

2016-09-08 17:53:38 user6810289

無法控制按鈕樣式和懸停樣式

回答

相關問題