Inserting a hover effect to a shortcode used in WordPress

At the bottom of my WordPress site there is a box with a header and this box was made by using the following `shortcode:

[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:[email protected]"><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>

I would like to add the following effect by scrolling with the mouseover "E-Mail senden" the cursor gets to a hand symbol. On top of this I would like the text to be bold by mouseover.

I think I need to add something like a:hover:text-decoration:bold but I didn`t find out the right way to do it until now. Can anybody help with that?

Solution

Via CSS, you can do following -

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

However, this will be applicable for all the <a> inside <div class="panel-heading"></div>.

I can see, this shortcode is not generating any id or class for them, so that you can add the CSS specific to that link. But, via jQuery, we can do a trick -

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