Question

我试图更改按钮的背景颜色和悬停状态。到目前为止唯一有效的是内联样式按钮，但后来我无法控制按钮的悬停状态。我也尝试将！important放在按钮上，如下面的代码所示，但这不起作用。我确定我的目标是正确的选择器，所以我不确定为什么背景颜色不会改变。

<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 psuedo选择器中已调换background-image和:hover。那和你的渐变值是一样的。这里的简化版本我已经更正了值并反转了悬停状态的渐变：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

感谢所有的回复，我最终通过在链接的按钮上添加一个额外的类来使其工作。我打电话给它。显示更多内容，然后用罗伯特韦德的回答来设计它并且它起作用了。仍然不明白为什么我使用的原始选择器不起作用，但我想我必须添加一个选择器，以使所有内容都按预期显示。

无法控制按钮样式和悬停样式

2 个答案: