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，您的最终代码段应如下所示 -

.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悬停的Wordpress短代码问题

1 个答案: