html - 无法突出显示导航菜单

Question

我有一个包含四个元素的菜单，比如 A 、 B 、 c 和 D

我想突出显示特定的元素，比如 A ，

我有这样的 HTML 和 CSS

div.smenu div a {
  padding:5px 10px;
  display:block;
  border-bottom:1px solid #ddd;
  color:#3c8287;
  background-color:#fff
}

div.smenu div a.current {
  background-color:#EEE;
  color:#3c8287;
  font-weight:700
}

div.smenu div a:hover {
  color:#3c8287;
  text-decoration:none;
  background-repeat:no-repeat;
  background-position:right center;
  font-weight:700;
  background-color:#EEE
}

<div class="smenu">
  <table>
    . . . .
    <div>
      <span>Create request for</span>

      <a href="xyz/abc/dosomething!inputa.action">A</a>
      <a href="xyz/abc/dosomething!inputb.action">B</a>

    </div>
    <div>
      <span>Direct access to</span>
      <a href="xyz/abc/dosomething!inputc.action">C</a>
      <a href="xyz/abc/dosomething!inputd.action">D</a>
    </div>
  </table>
</div>

只要我停留在“A”，就应该保持突出显示

在“A”中，我有任务要“编辑”(其中编辑是该页面中的超链接) 像

<a href="............" >edit</a>

现在，当我点击这个编辑链接时，我在“A”上的突出显示(粗体)消失了

任何解决此问题的帮助，将不胜感激 提前致谢!

Answer 1

在每个元素周围设置一个 div 并使用它来触发它:

<div class="smenu">
<table>
.
.
.
.
.
<span>Create request for</span>

                                <div class="menu-item"><a href="xyz/abc/dosomething!inputa.action">A</a><div>
                                <div class="menu-item"><a href="xyz/abc/dosomething!inputb.action">B</a><div>

                            </div>
                            <div >
                                <span>Direct access to</span>    
                                <div class="menu-item"><a href="xyz/abc/dosomething!inputc.action">C</a><div>
                                <div class="menu-item"><a href="xyz/abc/dosomething!inputd.action">D</a></div>

像这样做css:

.menu-item a : hover
{
    color: #3c8287;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: right center;
    font-weight: bold;
    background-color: #EEEEEE;
}

这是我通常的做法，没有任何问题。

此外，最好不要忘记“已访问”或尝试清除您的缓存。 希望你能让它发挥作用。

干杯