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

这就是我经常这样做而没有任何问题。

也可能最好不要忘记访问过的＆＃39;或尝试清除你的缓存。希望你能让它发挥作用。

干杯

Answer 2

这是因为你从不使用你的css类current

我们假设您在第A页，您应该将类current添加到A菜单元素中，如下所示：

＆＃13;

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
}

＆＃13;

<div class="smenu">
    <table>
        . . . .
        <div>
            <span>Create request for</span>

            <a class="current" 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>

＆＃13;

无法突出显示导航菜单

2 个答案: