将悬停效果插入 WordPress 中使用的简码

Question

在我的 WordPress site 底部有一个带有 header 的框，这个框是使用以下短代码制作的：

[panel style="panel-primary"][panel-header][icon type="glyphicon glyphicon-earphone" color="#ffffff" fontsize="20"]  <a style="color: white;" title="jetzt anrufen" href="&quot;tel:+498912717520"><span style="text-decoration: underline;">089 / 127 17 520 jetzt anrufen</span></a>          |         [icon type="fa fa-envelope-o" fontsize="20"]  <a style="color: white;" title="E-Mail senden" href="mailto:service@bodenmanufaktur-muenchen.de"><span style="text-decoration: underline;">E-Mail senden</span></a>          |         [icon type="glyphicon glyphicon-pencil" color="#ffffff" fontsize="20"]  <a style="color: white;" title="Kontaktformular benutzen" href="http://traumbad-muenchen.de/kontakt" target="_blank"><span style="text-decoration: underline;">Kontaktformular benutzen</span></a>[/panel-header][panel-content][icon type="fa fa-info-circle" color="#20b4ea" fontsize="20"] [/panel-content]
[/panel]</h3>

我想通过鼠标悬停滚动来添加以下效果 "E-Mail senden" 光标到达手形符号。最重要的是，我希望通过鼠标悬停将文本加粗。

我想我需要添加类似 a:hover:text-decoration:bold 的内容，但直到现在我才找到正确的方法。有人可以帮忙吗？

Answer 1

通过 CSS，您可以执行以下操作 -

.panel-heading a:hover{
font-weight: bold;
}

但是，这将适用于 <div class="panel-heading"></div> 内的所有 <a>。

我可以看到，这个短代码没有为它们生成任何 id 或 class，因此您可以添加特定于 link 的 CSS。但是，通过 jQuery，我们可以做一个技巧 -

jQuery(document).ready(function($){
    $('.panel-heading').find('a').each(function(){
     if($(this).prop('title') == 'E-Mail senden'){
         $(this).hover(function(){
          $(this).css('font-weight', 'bold');
       }, function(){
          $(this).css('font-weight', 'normal');
       });
     }
    });
}
);

将悬停效果插入 WordPress 中使用的简码

Inserting a hover effect to a shortcode used in WordPress

wordpress

shortcode