懸停或活動時HTML / CSS選項卡出現問題

Question

我遇到選項卡問題。 您可以在下面看到鏈接：

<div class="dm-main-tab-menu">
    <ul>
        <li class="Content active"><a accesskey="1" href="?content">Content</a></li>

        <li class="Objects"><a accesskey="1" href="?library">Libraries</a></li>

        <li class="Forms"><a accesskey="1" href="?applications">e-Forms</a></li>

        <li class="Reports"><a accesskey="1" href="?statistics">Statistics</a></li>

        <li class="Settings"><a accesskey="1" href="?settings">Settings</a></li>    
    </ul>
</div>

jsFiddle

正如您所看到的那樣，將鼠標懸停在第二個選項卡上即為“庫”，該圖標不可見，並且處於活動狀態時也是相同的。

有人可以幫我解決此問題嗎？

Answer 1

替換為：

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important;
}

為了這：

.dm-main-tab-menu > ul > li.Objects > a:hover {
    color: #ffffff;
    background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important;
}

您正在有效地將Objects元素的背景設置為其他背景，而不是您想要的效果（根據您的問題）。 取而代之的是，讓：active為您做其他事情，直到您個人實現為止。

Answer 2

這就是您的代碼的樣子。

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important; // Link working fine

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(gNew/Main/library_hover.gif) no-repeat 22px 12px !important; // Directory doesn't working
}

---

這是固定后的樣子。

/* Library Starts */

.dm-main-tab-menu > ul > li.Objects {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png)  22px 0px no-repeat !important;

padding:0px 0px 9px 0px;

margin:11px 0px 0px 3px;

}

.dm-main-tab-menu > ul > li.Objects > a:hover {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.

}

.dm-main-tab-menu > ul > li.Objects > .active {

color: #ffffff;

background:url(https://cdn3.iconfinder.com/data/icons/glypho-free/64/cog-settings-alt-16.png) no-repeat 22px 12px !important; // Replaced directory with link.
}

它認為問題基本上出在目錄上，它沒有獲得您在“懸停和活動的” css代碼中提供的目錄。因此，我將該目錄替換為link，並且工作正常。

---

您也不能使用。

<li class="Content active"></li> - will not work.

一個類應該沒有空格，因此您可以使用連字符。

<li class="Content-active"></li> - It will work.