CSS轉換不能用於更改顏色

我目前正在使用以下搜索模板在PHP中使用Wordpress網站。CSS轉換不能用於更改顏色

的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(); ?>

內容的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>

這是我在樣式表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; 
}

所以，當我嘗試將鼠標懸停在鏈接上，它不會更改文本顏色。有人知道一個快速解決？

順便說一下，我在Google Chrome中工作。可能是一些有用的信息。

來源

2015-10-19 Ben

a.search-result：hover {color：＃0000ff;} – InbetweenWeekends

嘗試

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

編輯

實際的問題是，標籤有其他HTML標籤 - 我們通過添加一個div容器搜索結果類解決它

來源

2015-10-19 14:02:13 vodich

沒有......這對我來說沒什麼用:-( – Ben

這就是處理懸停的正確方法我認爲問題在於你有其他的html標籤一個標籤 – vodich

你可以檢查我的評論版本，並告訴我我的錯誤是什麼地方？@vodich – Ben

你給風格的方式是錯誤的。

請試試這個，

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

你可以看到工作DEMO HERE

來源

2015-10-19 14:03:28

您應該在類和：hover之間的代碼中刪除空白。 – KittMedia

謝謝你@KittMedia。我已經更新了它。 –

目瞪口呆的是，這裏沒有人這樣回答正確...

使用a.search-result { transition: all 2s ease-in-out; }

也可以全局分配過渡到所有物業的工作，這可能不是一個不好的解決方案。

a { transition: all 2s ease-in-out; }雖然我建議更改2s到0.3s或0.4s。

來源

2015-10-19 18:22:20

CSS轉換不能用於更改顏色

回答

相關問題