神奇的CSS悬停代码不能在SharePoint页面中工作 [英] CSS hover codes mysteriously not working in SharePoint page
问题描述
我遇到SharePoint和CSS问题。我创建了一个具有悬停效果的简单图片选项卡。它完全用CSS完成。这是CSS代码片段（托管在一个单独的CSS文件中）：
div.activelayer {
margin-left： - 30PX;
background-image：url（/ systems_hr / onboarding / Custom％20Pages / Checklist％20EN / images / active.png）;
text-align：center;
height：55px;
width：200px;
display：inline-block;
职位：亲属;
float：left;
}
div.activelayer：hover {
margin-left：-30px;
background-image：url（/ systems_hr / onboarding / Custom％20Pages / Checklist％20EN / images / hover.png）;
text-align：center;
height：55px;
width：200px;
display：inline-block;
职位：亲属;
float：left;
}
div.inactivelayer {
margin-left：-30px;
background-image：url（/ systems_hr / onboarding / Custom％20Pages / Checklist％20EN / images / inactive.png）;
text-align：center;
height：55px;
width：200px;
display：inline-block;
职位：亲属;
float：left;
}
div.selectedlayer {
margin-left：-30px;
background-image：url（/ systems_hr / onboarding / Custom％20Pages / Checklist％20EN / images / selected.png）;
text-align：center;
height：55px;
width：200px;
display：inline-block;
职位：亲属;
float：left;
$ b div.selectedlayer：hover {
background-image：url（/ systems_hr / onboarding / Custom％20Pages / Checklist％20EN / images / selected.png） ;
cursor：text;
}
#innertab .alink {
margin-top：18px;
text-align：center;
margin-left：0px;
}
#innertab a.tablink {
color：#ffffff;
text-align：center;
}
#innertab a.tablink：hover {
text-decoration：none;
color：#ffffff;
text-align：center;
}
/ * ID * /
＃menu1 {
z-index：10;
}
＃menu2 {
z-index：9;
}
＃menu3 {
z-index：8;
}
＃menu4 {
z-index：7;
}
＃menu5 {
z-index：6;
}
在aspx页面中，我有这个：
< div id =innerTabclass =style =width：1000px; height：72px;>
< div id =menu1class =selectedlayerstyle =margin-left：0px>
< div class =alink>
< a href =f.htmlclass =tablinkid =tabitem1>菜单项目1< / a>
< / div>
< / div>
< div id =menu2class =activelayer>
< div class =alink>
< a href =f.htmlclass =tablinkid =tabitem2>菜单项2< / a>
< / div>
< / div>
< div id =menu3class =activelayer>
< div class =alink>
< a href =f.htmlclass =tablinkid =tabitem3>菜单项目3< / a>
< / div>
< / div>
< div id =menu4class =activelayer>
< div class =alink>
< a href =f.htmlclass =tablinkid =tabitem4>菜单项4< / a>
< / div>
< / div>
< div id =menu5class =inactivelayer>
< div class =alink>
< a href =f.htmlclass =tablinkid =tabitem5>菜单项5< / a>
< / div>
< / div>
< / div>
我遇到的问题是这样的：当我将它放在SharePoint中时它不起作用在IE中查看。
我首先在一个普通的HTML页面中测试了这段代码，它在IE中像一个魅力一样工作。当我转移SharePoint中的代码（它在页面模板中）时，它不起作用。因此，我在Chrome浏览器中查看了SharePoint测试页面，并且在那里工作，但出于某种真正离奇的原因，它不适用于IE。我没有在其他浏览器中测试过，而且我也没有真正计划，因为我正在处理的页面是Intranet站点，而且我们公司使用IE（正式，尽管我们中的一些人坚持使用Chrome或FireFox ），所以IE兼容性是我唯一的优先考虑。
有没有我在代码中遗漏的东西？请帮忙：（b / b）
哦，顺便说一句，我在MOSS2007编码，HTML代码正在使用在页面模板中，我的IE版本是IE8。这些信息与我遇到的问题有关：（b / b
$ b $ p感谢，
Poch
p>Sharepoint的样式表覆盖了你的样式表，所以你必须让你的选择器更加强大。打开开发者工具（点击f12），选择跟踪样式在右侧窗格上方，选择没有得到样式应用的元素，并检查样式是谁，然后只复制该选择器，让你的样式更加强大一些，例如：
margin-top：0px;
#innertab .alink - 18px ;
.someClass .someOtherClass #someId a - 0px
您只需将选择器更改为：
.someClass .someOtherClass #someId #innertab a.alin k
您的选择器现在变得更强大并且会被应用。
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
<a href="f.html" class="tablink" id="tabitem1">Menu Item 1</a>
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
<a href="f.html" class="tablink" id="tabitem2">Menu Item 2</a>
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
<a href="f.html" class="tablink" id="tabitem3">Menu Item 3</a>
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
<a href="f.html" class="tablink" id="tabitem4">Menu Item 4</a>
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
<a href="f.html" class="tablink" id="tabitem5">Menu Item 5</a>
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
这篇关于神奇的CSS悬停代码不能在SharePoint页面中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
