更改鼠标上特定标题的颜色 [英] change the color of the particular header on mouse over
问题描述
我的问题是当我的鼠标在 fois 标题，其文本不会变成白色我不知道我在哪里错了或包括什么。请帮助我........
当fois选项卡处于活动状态时文本颜色显示为白色的另一个问题
My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........
another problem when the fois tab is active the color of the text appear as white
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <link href="css.css" rel="stylesheet" />-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="accord.js"></script>
<style>
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active {
color: white;
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li>
<a href="#">main link1</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#">main link2</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2 id="fois"><a href="#" style="text-decoration:none;color:black;">FOIS</a></h2>
</li>
<li>
<h2>ASP</h2>
<div class="content">
<ul>
</ul>
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
content PTT
</div>
</li>
</ul>
</div>
<!-- wrap -->
</body>
</html>
符合档案
jQuery(function ($) {
$('.accord li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function () {
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
推荐答案
您正在宣告 color：black; inline CSS，如果您在样式表中使用！important ，将只覆盖。
You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.
其次，您需要定位 a 元素而不是 h2 ，因为 a 不会继承父元素颜色，除非您指定 a {color：inherit;} ，这将使所有<$ c $文档中的继承父颜色，或者具体可以使用 .accordion1 li h2 a { color：inherit;} ，如果你使用这个选择器，你不需要指定 a
Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..
.accordion1 li:hover h2 a {
color: white !important;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
我建议你删除内联样式，必须使用！important 。
I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.
这篇关于更改鼠标上特定标题的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
