CSS悬停代码在SharePoint页面中无法正常工作

我在SharePoint和CSS方面遇到问题。我正在创建一个页面，其中有一个简单的图像标签，具有悬停效果。它完全是用CSS完成的。以下是CSS片段（托管在单独的CSS文件中）：

在aspx页面中，我有以下内容：

        <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>

我遇到的问题是：当我在IE中查看时，将其放在SharePoint中时，它不起作用

我首先在一个普通的HTML页面中测试了这段代码，它在IE中工作得非常出色。当我在SharePoint中传输代码时（它在页面模板中），它不起作用。因此，我在Chrome中查看了SharePoint测试页面，它在那里工作，但出于一些真正奇怪的原因，它不适用于IE。我没有在其他浏览器中进行测试，我也不打算这样做，因为我正在使用的页面是一个内部网站，我们公司使用IE（官方，尽管我们中的一些人坚持使用Chrome或FireFox）所以IE兼容性是我唯一的优先考虑

代码中有我遗漏的东西吗？请帮助：(

哦，顺便说一句，我正在MOSS2007中编码，HTML代码正在页面模板中使用。我的IE版本是IE8。不确定这些信息是否与我遇到的问题相关，不过：(

谢谢

---

Poch

尝试添加！重要信息，如：

div.activelayer {
                margin-left:-30px!important;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
                text-align:center!important;
                height:55px!important;
                width:200px!important;
                display:inline-block!important;
                position:relative!important;
                float:left!important;
            }

---

尝试添加！重要的，如：

div.activelayer {
                margin-left:-30px!important;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
                text-align:center!important;
                height:55px!important;
                width:200px!important;
                display:inline-block!important;
                position:relative!important;
                float:left!important;
            }

---

Sharepoint的样式表将覆盖您的样式表，因此您必须增强选择器。打开开发人员工具（点击f12），选择“跟踪样式”右窗格上方。选择未应用其样式的元素，并检查谁应用了其样式。然后只需复制该选择器，使您的样式更强大一点。例如，您可能会看到：

页边距顶部：0px；

#innertab.alink-18px；

.someClass.someOtherClass#someId a-0px

您只需将选择器更改为：

.someClass.someOtherClass#someId#innertab a.alink

---

您的选择器现在更强大，将被应用。

Sharepoint的样式表将覆盖您的样式表，因此您必须使选择器更强大。打开开发人员工具（点击f12），选择“跟踪样式”右窗格上方。选择未应用其样式的元素，并检查谁应用了其样式。然后只需复制该选择器，使您的样式更强大一点。例如，您可能会看到：

页边距顶部：0px；

#innertab.alink-18px；

.someClass.someOtherClass#someId a-0px

您只需将选择器更改为：

.someClass.someOtherClass#someId#innertab a.alink

---

您的选择器现在更强大，将被应用。

几周前，我遇到了类似的问题。我找不到确切的资源来说明这一点，但通过反复试验，我发现我只能应用CSS Psuedo类（如

：hover

和

：active

）要

，请设置锚定标记的样式，并使用以下HTML和CSS将图像精灵嵌套在
标记中：

HTML

<ul id="wheel" class="wheel"><li>
<a href="#"><img src="images1/design.png"></a></li>
</ul>

很可能你还没有解决这个问题，希望这能有所帮助！
几周前我也遇到过类似的问题。我找不到确切的资源来说明这一点，但通过反复试验，我发现我只能应用CSS Psuedo类（如
：hover
和
：active
）要
，请设置锚定标记的样式，并使用以下HTML和CSS将图像精灵嵌套在
标记中：

HTML

<ul id="wheel" class="wheel"><li>
<a href="#"><img src="images1/design.png"></a></li>
</ul>

很可能你还没有解决这个问题，希望这能有所帮助！
你能给我们看一个实时版本吗？@ahmad alfy Hi，不幸的是，它在一个内部网站中，所以我无法显示SharePint页面的实时示例：（你的样式表不起作用的原因可能有100个左右……如果你能在fiddle上发布输出，我想我们可能会得到线索，并能看到错误所在。你能给我们看一个实时版本吗？@ahmad alfy Hi，很遗憾，它在一个内部网站上，所以我无法显示SharePint页面的实时示例：（你的样式表不起作用的原因可能有100个左右……如果你能通过fiddle发布输出，我想我们可能会得到一个线索，并且能够看到错误的地方。我不认为这是他应该得到的答案。我认为页面上呈现的最终标记有问题。假设有不同的选择器覆盖他的声明；这是否意味着他应该绕过！重要还是声明一个更具体的选择器？@ahmad alfy-是的，我试着加上！重要，但不起作用：（我认为这不是他应该得到的答案。我认为页面上呈现的最终标记有问题。假设有不同的选择器覆盖了他的声明；这是否意味着他应该绕过它！重要还是声明一个更具体的选择器？@ahmad alfy-是的，我尝试添加了！重要，b但是它不起作用：（谢谢：）我怎么看悬停代码？当我看开发工具时，我看到的是：。它正在变为active.png，但不是hover.png：（顺便说一句，我将activelayer改为alayr，认为SP可能已经使用了这个名称，但仍然没有骰子：（@Poch-让IE开发者工具向你展示
：hover
样式很棘手，