css悬停的Wordpress短代码问题

我试图用CSS解决我的短代码上的一个问题

你可以在这里看到它的作用：

和短代码：

// 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' );

//添加短代码
功能服务快捷码（$atts）{
//属性
提取（短码）(
排列(
“Posico”=>”，
'icon'=>'default.png'，
“titulo”=>“O ServiçO”，
'链接'=>''，
)，$atts）
);
//代码
返回'
“.$titulo。”
';
}
添加_短代码（'servicos'，'servicos_短代码'）；

---

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

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

在CSS上，您可以为

和

设置悬停效果

但是，如果您不想使用悬停效果，则应影响

文章中的所有div

。因此，只需从CSS中删除

article.hover.round div

，您的最后一段代码应该如下所示-

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

---

怎么了？你说有CSS问题，还提到了悬停。。。但是没有CSS代码。如果是CSS问题，那么我们需要查看CSS。我不能在这里发布所有CSS元素，但你可以在borwser（firefox、chrome）上使用firebug或类似工具查看。问题是同时在所有回合选项下悬停。嘿，我刚刚发布了一个答案。让我知道这是否有帮助。@aniskhan001我试着用小提琴这里是链接[hi@aniskhan001仍然存在与over相同的问题，我做了您在上面发布的更改，但问题仍然存在**在所有div上显示悬停效果**如果您无法通过硬编码编辑CSS文件，您可以尝试其他方法。请检查我答案的更新。[try here@aniskhan001我相信我已经定义了每个css。

.hover

类是在用户将鼠标悬停在div上时添加的。它是由JS在您的站点上完成的。您没有在这把小提琴中包含任何JS。jquery 1.11它在框架/扩展上的加载

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