更改類的鏈接提示

Question

我有鏈接提示：

<a class="event color-red" href="#"><span>information</span>link</a> 

它怎樣才能改變：

<a class="event" href="#"><span>information</span>link</a> 

，並保持提示作用。

這是我的代碼實際上，JavaScript代碼是我的，但拉到互聯網的CSS：

$(document).ready(function() { 
 
$('event color-red').hide(); 
 
}); 
 

 
$(function() { 
 
$(".event color-red").click(function() { 
 
$('event color-red').fadeIn(); 
 
var commentContainer = $(this).parent(); 
 
var id = $(this).attr("id"); 
 

 
alert("The value is "+id); 
 

 
return false; 
 
\t }); 
 
});

.event, 
 
.cancel, 
 
.music, 
 
.subtitle 
 
\t { 
 
\t position: relative !important; 
 
\t display: inline-block !important; 
 
\t text-decoration: none !important;  
 
\t } 
 
\t 
 
.event span, 
 
.cancel span, 
 
.music span, 
 
.subtitle span, 
 
.css-tooltip-diagonal-right span, 
 
.css-tooltip-diagonal-left span 
 
\t { 
 
\t min-width: 180px; 
 
\t font-family: arial, sans-serif !important; 
 
\t font-size: 13px !important; 
 
\t line-height: normal !important; 
 
\t text-align: left !important; 
 
\t padding: 10px 10px 12px 10px !important; 
 
\t visibility: hidden; 
 
    opacity: 0; 
 
\t position: absolute; 
 
\t z-index: 9999999 !important; 
 

 
\t -webkit-transition-duration: 0.25s; 
 
\t -moz-transition-duration: 0.25s; 
 
\t -o-transition-duration: 0.25s; 
 
\t -ms-transition-duration: 0.25s; 
 
\t transition-duration: 0.25s; 
 
\t -webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1); 
 
\t -moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1); 
 
\t -o-transition-timing-function: cubic-bezier(0.35,0,0.35,1); 
 
\t -ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1); 
 
\t transition-timing-function: cubic-bezier(0.35,0,0.35,1); 
 
\t } 
 

 
.event span:before, 
 
.cancel span:before, 
 
.music span:before, 
 
.subtitle span:before, 
 
.css-tooltip-diagonal-right span:before, 
 
.css-tooltip-diagonal-left span:before 
 
\t { 
 
\t content: ""; 
 
\t display: block; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t position: absolute; 
 
\t } 
 

 
/* Tool tip Top */ 
 
.event span 
 
\t { 
 
\t left: -10px; 
 
\t bottom: 100%; 
 
\t margin-bottom: 30px; 
 
\t 
 
\t -webkit-transition-property: opacity, margin-bottom, visibility; 
 
\t -moz-transition-property: opacity, margin-bottom, visibility; 
 
\t -o-transition-property: opacity, margin-bottom, visibility; 
 
\t -ms-transition-property: opacity, margin-bottom, visibility; 
 
\t transition-property: opacity, margin-bottom, visibility; 
 
\t } 
 
\t 
 
.event span:before 
 
\t { 
 
    border-left: 8px solid transparent !important; 
 
    border-right: 8px solid transparent !important; 
 
\t border-top: 8px solid #000; 
 
\t border-bottom: 0 !important; 
 
\t bottom: -8px; 
 
\t left: 15px; 
 
\t } 
 

 
.event:hover span 
 
\t { \t 
 
\t margin-bottom: 10px; /* End Position */ 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t } 
 

 
\t 
 
/* tooltip left 
 
-------------------------------------------------------------- */ 
 

 
.subtitle span 
 
\t { 
 
\t right: 100%; 
 
\t top: -7px; 
 
\t margin-right: 35px; 
 
\t 
 
\t -webkit-transition-property: opacity, margin-right, visibility; 
 
\t -moz-transition-property: opacity, margin-right, visibility; 
 
\t -o-transition-property: opacity, margin-right, visibility; 
 
\t -ms-transition-property: opacity, margin-right, visibility; 
 
\t transition-property: opacity, margin-right, visibility; 
 
\t } 
 
\t 
 
.subtitle span:before 
 
\t { 
 
    border-left: 8px solid #000; 
 
    border-right: 0 !important; 
 
\t border-top: 8px solid transparent !important; 
 
\t border-bottom: 8px solid transparent !important; 
 
\t top: 11px; 
 
\t right: -8px; 
 
\t } 
 

 
.subtitle:hover span 
 
\t { \t 
 
\t margin-right: 15px; 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t } 
 
\t 
 
/* tooltip right 
 
-------------------------------------------------------------- */ 
 

 
.music span 
 
\t { 
 
\t left: 100%; 
 
\t top: -7px; 
 
\t margin-left: 35px; 
 

 
\t -webkit-transition-property: opacity, margin-left, visibility; 
 
\t -moz-transition-property: opacity, margin-left, visibility; 
 
\t -o-transition-property: opacity, margin-left, visibility; 
 
\t -ms-transition-property: opacity, margin-left, visibility; 
 
\t transition-property: opacity, margin-left, visibility; 
 
\t } 
 
\t 
 
.music span:before \t { 
 
    border-left: 0 !important; 
 
    border-right: 8px solid #000; 
 
\t border-top: 8px solid transparent !important; 
 
\t border-bottom: 8px solid transparent !important; 
 
\t top: 11px; 
 
\t left: -8px; 
 
\t } 
 

 
.music:hover span 
 
\t { \t 
 
\t margin-left: 15px; 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t } 
 
\t 
 
\t 
 
/*tooltip bottom 
 
-------------------------------------------------------------- */ 
 

 
.cancel span 
 
\t { 
 
\t left: -10px; 
 
\t top: 100%; 
 
\t margin-top: 30px; 
 
\t 
 
\t -webkit-transition-property: opacity, margin-top, visibility; 
 
\t -moz-transition-property: opacity, margin-top, visibility; 
 
\t -o-transition-property: opacity, margin-top, visibility; 
 
\t -ms-transition-property: opacity, margin-top, visibility; 
 
\t transition-property: opacity, margin-top, visibility; 
 
\t } 
 
\t 
 
.cancel span:before 
 
\t { 
 
    border-left: 8px solid transparent !important; 
 
    border-right: 8px solid transparent !important; 
 
\t border-top: 0 !important; 
 
\t border-bottom: 8px solid #000; 
 
\t top: -8px; 
 
\t left: 15px; 
 
\t } 
 

 
.cancel:hover span 
 
\t { \t 
 
\t margin-top: 10px; 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t } 
 
\t 
 
/* Tooltip Color */ 
 
.color-blue span 
 
\t { 
 
\t color: #ffffff !important; 
 
\t 
 
\t background: rgba(0,0,0,0.75); 
 
\t background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); 
 
\t background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 

 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t 
 
\t text-shadow: 0px 1px 0px rgba(0,0,0,0.4); 
 
\t } 
 

 
.color-blue span:before 
 
\t { 
 
\t border-color: rgba(0,0,0,0.75); 
 
\t } 
 
\t 
 
.color-blue span:after 
 
\t { 
 
\t content: ""; 
 
\t display: block; 
 
\t border-top: 1px solid rgba(0,0,0,0.75); 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1px; 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t } 
 
\t 
 
.color-green span 
 
\t { 
 
\t color: #ffffff !important; 
 
\t 
 
\t 
 
\t background: rgba(0,0,0,0.75); 
 
\t background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); 
 
\t background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t 
 
\t 
 
\t text-shadow: 0px 1px 0px rgba(0,0,0,0.4); 
 
\t } 
 

 

 
.color-green span:before 
 
\t { 
 
\t border-color: rgba(0,0,0,0.75); 
 
\t } 
 
\t 
 

 
.color-green span:after 
 
\t { 
 
\t content: ""; 
 
\t display: block; 
 
\t border-top: 1px solid rgba(0,0,0,0.75); 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1px; 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t 
 
\t 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t } 
 
\t 
 

 
.color-green span strong 
 
\t { 
 
\t background: #246407; 
 
\t border-bottom: 1px solid #205a06; 
 
\t } 
 
\t 
 
/*orange*/ 
 

 
.color-orange span 
 
\t { 
 
\t color: #ffffff !important; 
 
\t 
 
\t 
 
\t background: rgba(0,0,0,0.75); 
 
\t background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); 
 
\t background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t 
 
\t 
 
\t text-shadow: 0px 1px 0px rgba(0,0,0,0.4); 
 
\t } 
 

 

 
.color-orange span:before 
 
\t { 
 
\t border-color: rgba(0,0,0,0.75); 
 
\t } 
 
\t 
 

 
.color-orange span:after 
 
\t { 
 
\t content: ""; 
 
\t display: block; 
 
\t border-top: 1px solid rgba(0,0,0,0.75); 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1px; 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t 
 
\t 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t } 
 
\t 
 

 
.color-orange span strong 
 
\t { 
 
\t background: #bf461a; 
 
\t border-bottom: 1px solid #ac3f17; 
 
\t } 
 
\t 
 
\t /*red*/ 
 

 
.color-red span 
 
\t { 
 
\t color: #ffffff !important; 
 
\t background: rgba(0,0,0,0.75); 
 
\t background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); 
 
\t background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t text-shadow: 0px 1px 0px rgba(0,0,0,0.4); 
 
\t } 
 
.color-red span:before 
 
\t { 
 
\t border-color: rgba(0,0,0,0.75); 
 
\t } 
 
.color-red span:after 
 
\t { 
 
\t content: ""; 
 
\t display: block; 
 
\t border-top: 1px solid rgba(0,0,0,0.75); 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1px; 
 
\t width: 100%; 
 
\t height: 10px; 
 
\t -webkit-border-radius: 4px; 
 
\t -moz-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t } 
 
.color-red span strong 
 
\t { 
 
\t background: rgba(0,0,0,0.75); 
 
\t border-bottom: 1px solid rgba(0,0,0,0.75); 
 
\t }

<br><br><br><br> 
 

 

 
<a class='event color-red' href="#" id="1"><span>informação</span>link</a>

我不知道解決了這個問題。

請有人幫忙嗎？

其實不知道css。

非常感謝！

Answer 1

你的代碼（$(".event color-red")）實際上是選擇與color-red INSIDE與類名event元素的類名的元素（這是從你的描述不同。）

但是，如果你想fadeIn內的span元素.event錨，你可以使用$(".event")選擇點擊事件綁定和內使用$(this).find('> span')作爲一個選擇，以獲得span元素，讓它褪色與.fadeIn()

因此，代碼WOU LD的樣子：

$(document).ready(function() { 
    $('.event > span').hide(); // Get the direct descendant of all elements with classname 'event' 
}); 

$(function() { 
    // Bind the click event to the anchors with classname 'event' 
    $(".event").click(function(ev) { 

    ev.preventDefault(); 

    // Fade in the SPAN inside the anchor 
    $(this).find('> span').fadeIn(); 

    }); 
}); 

重要提示：精確無誤，並提供你的選擇，看看：jQuery's documentation on this