Question

我正在改编WordPress主题中的一些代码。我已经成功地修改了导航菜单以触发:hover上的CSS翻转，但是遇到了一个奇怪的问题，其中：悬浮鼠标似乎仅正确地适用于主菜单元素的区域-滚动填充内的任何内容均按预期方式将background-color更改为黑色，将color更改为白色，但是滚动填充自身仅触发background-color，而color保持黑色。

如何更改它，以便通过在其主区域或的填充上滚动来触发每个菜单项的滚动？

导航菜单包含在以下内容中：

<nav id="site-navigation" class="main-navigation">
  <ul id="primary-menu" class="primary-menu">
    <li><a href="http://localhost/wordpress/home">Home</a></li>
    <li><a href="http://localhost/wordpress/about/">About</a></li>
    <li><a href="http://localhost/wordpress/services/">Services</a></li>
    <li><a href="http://localhost/wordpress/people/">People</a></li>
    <li><a href="http://localhost/wordpress/mission/">Mission</a></li>
    <li><a href="http://localhost/wordpress/donate/">Donate</a></li>
    <li><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</nav>

这是适用于它的CSS：

.primary-menu>li {
  font-size: 18px;
  font-weight: bold;
  display: inline-block; 
  vertical-align: middle;
  overflow: hidden;
}

.primary-menu>li a {
  padding: 6px 8px 6px 8px;
}

.primary-menu .current-menu-item {
  background-color: #000;
  color: #FFF;
}

.primary-menu>li:hover, .primary-menu>li:focus, .primary-menu>li:active {                       
  background-color: #000;
  color: #FFF;
}

Answer 1

我认为这可能是您正在寻找的解决方案。

将带有伪类的规则更改为此：

class DemoCreator(AnchorLayout):

    ev_status = NumericProperty(None)  # get ev status(UDP packet)

    def receive_ev_status(self):
        r = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        r.bind(('', 5555))
        prev_data = 0
        data, _ = r.recvfrom(1024)

        if not data:
            data = prev_data
        return int.from_bytes(data, 'little')

    def update_ev_status(self, dt):
        self.ev_status = self.receive_ev_status()


class DemoApp(App):

    def build(self):

        hmi = DemoCreator()
        hmi.map_box.host_car.start((450, 0)

        Clock.schedule_interval(hmi.update_ev_status, 0.5)
        Clock.schedule_interval(hmi.map_box.update_car, 1 / 60)

        return hmi

if __name__ == '__main__':
    DemoApp().run()

它说，将鼠标悬停在列表项上时，请更改超级链接而不是列表项的背景色和文本颜色。

使：hover适用于填充以及主要内容区域

1 个答案: