带有 CSS 悬停的 Wordpress 简码问题

Posted 2023-05-08

【中文标题】带有 CSS 悬停的 Wordpress 简码问题

【英文标题】：Wordpress shortcode problems with css hover

【发布时间】：2014-09-23 16:09:09

【问题描述】：

我正在尝试解决我的短代码上的 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.'" >
      </div> 
      <!-- /.widget-front -->
     <h4>'.$titulo.'</h4>
    </div> 
</div> ';



add_shortcode( 'servicos', 'servicos_shortcode' );

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

【问题讨论】：

有什么问题？

你说有一个 CSS 问题并提到悬停......但是没有 CSS 代码。如果是 CSS 问题，那么我们需要查看 CSS。

我不能在这里发布所有的 css 元素，但是你可以在你的浏览器（firefox、chrome）上看到 firebug 或类似的元素。问题是它同时在所有圆形选项下悬停。

嘿，我刚刚发布了一个答案。让我知道这是否有帮助。

@aniskhan001 我尝试小提琴这里是链接 [jsfiddle.net/mvital/Kg9X8/]

【参考方案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;

【讨论】：

嗨 @aniskhan001 仍然有同样的问题，我做了你在上面发布的更改，但问题仍然存在 **显示所有 div 上的悬停效果**

如果您无法通过硬编码编辑 CSS 文件，您可以尝试其他方法。请检查我的答案的更新。

[jsfiddle.net/mvital/Kg9X8/] 在这里试试@aniskhan001 我相信我已经定义了每个css ..

.hover 类是在用户将鼠标悬停在 div 上时添加的。这是由您网站上的 JS 完成的。你没有在这个小提琴中包含任何 JS。

jsfiddle.net/mvital/96aCm/1 jquery 1.11 它在框架/扩展上的加载