css - css hover 的 Wordpress 简码问题

Question

我正在尝试解决我的短代码中的 CSS 问题。

你可以在这里看到它的实际效果:

http://www.mariovital.com/jose-ollin/sample-page

和短代码:

// Add Shortcode
function servicos_shortcode( $atts ) {

// Attributes
extract( shortcode_atts(
    array(
        'posicao' => '',
        'icon' => 'default.png',
        'titulo' => 'O Serviço',
        'link' => '',
    ), $atts )
);

// Code
return '
<div class="span3 fp-'.$posicao.'">
    <div class="widget-front">
      <div class="thumb-wrapper tc-holder">
        <a class="round-div" href="'.$link.'" title="'.$titulo.'"></a>
        <img src="'.$icon.'" alt="'.$servico.'">
      </div> 
      <!-- /.widget-front -->
     <h4>'.$titulo.'</h4>
    </div> 
</div> ';

}

add_shortcode( 'servicos', 'servicos_shortcode' );

问题出在您可以在我的测试页面上看到的悬停选择器上。我真的不知道CSS代码有什么问题。

Answer 1

我假设您希望悬停效果应该在用户悬停时发生在特定的 div 上。而且它不应该同时发生在所有这些 div 上。所以这是解决方案-

在您的 CSS 上，您为 <article> 设置了悬停效果和 <div class="widget-font">

.widget-front.hover .round-div,
article.hover .round-div {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}

但是如果你不想悬停效果应该影响article里面的所有div .所以，只需删除 article.hover .round-div来自 CSS，您的最终代码段应如下所示 -

.widget-front.hover .round-div {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}

编辑:

我只是看看你的代码。你还有article.hover .round-div在你的 CSS 代码上。如果 CSS 是在外部生成的并且您无法更改它，则可以在末尾添加以下代码 -

article.hover .round-div {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}