CSS转换不适用于改变颜色

Question

I'm currently working on a Wordpress site with the following search template in PHP.

search.php:

<?php
/**
 * The template for displaying search results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */

get_header(); ?>

<link rel="stylesheet" href="wp-content/themes/twente.com/style_search_results.css" />

<div class="global-wrap " role="alien-grid" data-grid-cols="4">
        <div class="column full">
            <div class="item maincontent">
                <article class="search-results">

                        <?php if ( have_posts() ) : ?>

                            <h1> <?php
                                    $mySearch =& new WP_Query("s=$s & showposts=-1");
                                    $num = $mySearch->post_count; ?>

                                    Er zijn <?php echo $num; ?> berichten gevonden.

                                <?php //printf( __( 'Search Results for: %s', 'twentyfifteen' ), get_search_query() ); ?>
                            </h1>

                            <?php
                            // Start the loop.
                            while ( have_posts() ) : the_post(); ?>
                                <?php
                                /*
                                 * Run the loop for the search to output the results.
                                 * If you want to overload this in a child theme then include a file
                                 * called content-search.php and that will be used instead.
                                 */
                                get_template_part( 'content', 'search' );

                            // End the loop.
                            endwhile;

                            // Previous/next page navigation.
                            the_posts_pagination( array(
                                'mid_size'              => 2,
                                'prev_text'             => __( 'Vorige pagina', 'twentyfifteen' ),
                                'next_text'             => __( 'Volgende pagina', 'twentyfifteen' ),
                            ) );

                        // If no content, include the "No posts found" template.
                        else :
                            get_template_part( 'content', 'none' );

                        endif;
                        ?>

                </article>
            </div>
        </div>

</div>

<?php get_footer(); ?>

content-search.php:

<?php
/**
 * The template part for displaying results in search pages
 *
 * Learn more: {@link https://codex.wordpress.org/Template_Hierarchy}
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

<a href="<?php the_permalink(); ?>" class="search-result">
    <article>
        <h2><?php the_title(); ?></h2>

        <?php the_excerpt( $more ); ?>

    </article><!-- #post-## -->
</a>

This is what I got in the Stylesheet style_search_results.css:

a.search-result {
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 29px;
    margin: 0 0 0 -25px;
    transition: color 2s;
}

a:hover.search-result {
    color: #0000ff;
}

So when I try to hover over the link, it does not change text color. Someone knows a quick fix?

By the way, I am working in Google Chrome. Might be some useful information.

Answer 1

try

a.search-result:hover{color:#0000ff}

EDIT

Actual problem was that the a tag had other html tags - we solved it by adding a div container with search-result class