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

Posted 2023-03-06

【中文标题】无法控制按钮样式和悬停样式

【英文标题】：Unable to Control Button Style and Hover Style

【发布时间】：2017-01-16 17:11:20

【问题描述】：

我试图更改按钮的背景颜色和悬停状态。到目前为止，唯一起作用的是内联样式按钮，但后来我无法控制按钮的悬停状态。我还尝试将 !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>

【问题讨论】：

html 代码在哪里？赋予我们权力。为我们提供帮助您所需的一切。实际上，您可以省略 javascript 并提供它呈现的 html 代码。然后我们可以检查元素，验证您的规则是否确实有效，或者被另一个更具体的规则过度限定。可以肯定地说，如果您在自然状态规则上声明了 !important，那么您为悬停状态声明的任何内容都将被过度限定 - 除非您也为该规则声明 !important。

你的 CSS 完全错误

【参考方案1】：

我认为您的 :hover 伪选择器中有 background-color 和 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>

【参考方案2】：

感谢所有回复，我最终通过向按钮链接添加一个额外的类来让它工作。我把它命名为 .show-more-content 然后用 Robert Wade 的回应来设计它并且它起作用了。仍然不明白为什么我使用的原始选择器不起作用，但我想我必须添加一个选择器才能使所有内容都按预期显示。