更改链接工具提示的类

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

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

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

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

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

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

	
/* tooltip left
-------------------------------------------------------------- */

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

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

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

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

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

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

.cancel:hover span
	{	
	margin-top: 10px;
	visibility: visible;
	opacity: 1;
	}
	
/* Tooltip Color */
.color-blue span
	{
	color: #ffffff !important;
	
	background: rgba(0,0,0,0.75);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);
	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))); 
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
	background: linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);

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

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


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

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

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

.color-orange span
	{
	color: #ffffff !important;
	
	
	background: rgba(0,0,0,0.75); 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%); 
	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))); 
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
	background: -o-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%); 
	background: linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	
	text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
	}


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

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

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

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

<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')选择器绑定click事件并在其中使用span {1}}作为获取.fadeIn()元素的选择器，并使其与$(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(); }); }); 淡出•

所以代码看起来像：

Console.WriteLine(string.Join(Environment.NewLine,
    Enumerable.Range(0, a.Length)
    .Select(i => string.Format("{0} {1} {2}", a[i], b[i], c[i]))));

重要提示：使用选择器准确无误，请查看：jQuery's documentation on this