代码之家 › 专栏 › 技术社区 › heidi37

在WordPress中使用的短代码中插入悬停效果

shortcode wordpress

heidi37 · 技术社区 · 10 年前

在我的WordPress底部 site 有一个带有标题的盒子,这个盒子是使用以下“短码”制作的:

[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-mailsenden”上滚动鼠标来添加以下效果,光标到达手符号。除此之外,我希望通过鼠标悬停将文本加粗。

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

1 回复 | 直到 9 年前

Domain 10 年前

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

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

但是,这将适用于所有 <a> 在…内 <div class="panel-heading"></div> .

我可以看到,这个简码没有生成任何 id 或 class 以便您可以添加特定于该链接的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');
       });
     }
    });
}
);

推荐文章

SubZer0 · WordPress搜索结果的个性化,包括页面和类别

1 年前

Artm · 如何在Wordpress中编写和使用添加重写规则代码?

1 年前

James1370 · 根据用户ID按类别ID设置免费价格产品

1 年前

mewiben39 · 如何在WordPress的前端显示应用程序密码功能?

2 年前

Digi verse · 我正在尝试将按钮悬停颜色更改为透明,但不起作用

2 年前

Mitch C · Wordpress将当前用户ID添加到HTML脚本中

2 年前

seco · 如何在不挂起页面的情况下加载JS

2 年前

LaluArjunK · 我可以在从垃圾箱中删除wordpress中的产品时显示错误消息吗?

2 年前

Eve · 用于颤振的可湿性粉剂api

2 年前

Selcuk xD · 结合两个相似的。js函数为1

2 年前