【问题标题】:CSS link and change property when hover悬停时CSS链接和更改属性
【发布时间】:2013-01-21 22:36:32
【问题描述】:

如何在悬停时更改另一个类的属性。

如果我说我有 A 和 B 类,A 有悬停事件,如果我想在 A 悬停时更改 B 内部,我该怎么办?

A:hover {}

B{ color:#FFF; }

A:hover + B{ color:#000;  } didnt work

其实是 CSS

.has_child is inside of .navi

.navi > ul > li:hover 
+ .navi > ul > li > .has_child:after {
    color: #09F;
}

HTML

   <nav class="navi ">
    <ul>
      <li style="height:8px; width:8px; padding:0px; margin:0px;">&nbsp;
      </li>
      <li>
        <a href="#" class="MM_no_child">General Config</a>
      </li>
      <li>
        <a href="#" class="MM_has_child">Menu</a>
        <ul>
          <li style="height:8px; width:8px; padding:0px; margin:0px;">&nbsp;
          </li>
          <li>
            <a href="#" class="MM_no_child">English</a>
          </li>
          <li>&nbsp;
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="MM_no_child">User Level</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">User</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">Tag</a>
      </li>
      <li>
        <a href="#" class="MM_no_child">Log</a>
      </li>
      <li>&nbsp;
      </li>
    </ul>
  </nav>

非常感谢您的建议。

==============

更新

如果之前有 >,似乎 + 运算符也不起作用。

A:hover + B{ 颜色:#000; } 会正常工作。

A:hover + C > B{ 颜色:#000; } 将不起作用。

【问题讨论】:

  • 你的 HTML 结构是什么?
  • 它的 HTML5,我的回答正确吗?
  • 没有。结构看起来如何?你有什么元素?
  • 请添加您的HTML代码(例如&lt;div&gt;&lt;/div&gt;)...

标签: html css hover


【解决方案1】:

为我工作。

您应该检查您的选择器。你用的是什么浏览器?

【讨论】:

  • 我的就像 .navi > ul > li:hover +.navi > ul > li > .MM_has_child:after { },没用
  • 尝试改用+ li &gt; .has-child:after
【解决方案2】:

.A 必须在 .B

<div class="A">
    <div class="B">
        something
    </div>
</div>

然后在你的样式表中:

.A:hover .B { some css code }

【讨论】:

    猜你喜欢
    • 2012-11-02
    • 2013-02-09
    • 2011-06-10
    • 1970-01-01
    • 2020-11-10
    • 1970-01-01
    • 2023-03-28
    • 2018-11-12
    • 1970-01-01
    相关资源
    最近更新 更多