带有 CSS 悬停的 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。因此，只需从 CSS 中删除 article.hover .round-div，您的最终 sn-p 应该如下所示 -

.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);
}

编辑：

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

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