添加PHP代码后，按钮上的CSS悬停属性不起作用

Question

我在按钮上添加了悬停效果。代码效果完美无缺，直到我在页面中添加了一些PHP代码。除了悬停效果之外的一切都运行正常。它试图通过使用控制台来理解问题但没有提示。 这是我的代码：

CSS：

#secondary-content
{
    position: relative;
    top: 100vh;
}
#write-blog
{
    position: relative;
    top: -50%;
    z-index: 3;
}
.ghost-button
{
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: #fff;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
}
.ghost-button:hover, .ghost-button:active
{
    background-color: #fff;
    color: #000;
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

这是我体内的代码：

<div class="slider fullscreen" data-indicators="false">
    <ul class="slides">
        <li>
            <img src="Includes/images/map2.jpg">
            <div class="caption left-align">
                <h3 class="light white-text">History doesn't repeats itself,<br>but it does rhyme.</h3>
            </div>
        </li>
        <li>
            <div class="caption right-align">
                <h1 class="light white-text">First solve the problem.<br>Then, write the code.</h1>
            </div>
            <img src="Includes/images/sublime_text.jpeg"> <!-- random image -->
        </li>
        <li>
            <div class="caption center-align">
                <h4 class="light white-text">Art speaks where words are unable to explain.</h4>
            </div>
            <img src="Includes/images/art1.jpg">
        </li>
        <li>
            <img src="Includes/images/music2.jpg">
            <div class="caption right-align">
                <h5 class="light grey-text text-lighten-3">Where words fail, Music speaks.</h5>
            </div>
        </li>
        <li>
            <div class="caption left-align">
                <h4 class="light white-text">Science is the poetry of<br>reality.</h4>
            </div>
            <img src="Includes/images/science.jpg"> <!-- random image -->
        </li>            
    </ul>
    <div id="write-blog" class="center-align">
        <a class="ghost-button" href="">WRITE A BLOG</a>
    </div>
</div>
    <div id="secondary-content">
    <div class="container">
                <?php
                    $blog = DB::getInstance()->get('blogs', array('deletion_status', '=', '0'));
                    if($blogs = $blog->fetchRecords(2))
                    {
                        foreach($blogs as $blog)
                        {
                            $date=strtotime($blog->created_on); // changing the format of timestamp fetched from the database, converting it to milliseconds
                            echo 
                            "<div class='section'>
                                <div class='row'>
                                    <div class='col s2'>
                                        <blockquote>".
                                            date('M', $date)."<br>".
                                            date('Y d', $date).
                                        "</blockquote>
                                    </div>
                                    <div class='col s8'>
                                        <h5>".ucfirst($blog->title)."</h5>
                                        <h6>".ucfirst($blog->description)."</h6><br>
                                        <div class='row'>
                                            <div class='col s1'>
                                                <i class='material-icons' style='color:grey'>remove_red_eye</i>
                                            </div>
                                            <div class='col s1'>
                                                {$blog->views}
                                            </div>
                                            <div class='col s1 offset-s2'>
                                                <i class='material-icons' style='color:grey'>thumb_up</i>
                                            </div>
                                            <div class='col s1'>
                                                {$blog->likes}
                                            </div>
                                            <div class='col s1 offset-s2'>
                                                <i class='material-icons' style='color:grey'>thumb_down</i>
                                            </div>
                                            <div class='col s1'>
                                                {$blog->dislikes}
                                            </div>
                                        </div>
                                        <div class='divider'></div>
                                    </div>
                                </div>
                            </div>";
                        }
                    }
                ?>
    </div>
<script src="Includes/js/jquery.min.js"></script>
<script type="text/javascript" src="Includes/js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        $('.slider').slider();
    });
</script>

id为'secondary-content'的div下面的代码也正常工作。我在这做什么错？