Question

所以我有javascript创建一个导航栏 - 无序列表里面有几个常规列表。我想使用导航栏中的最后一个列表元素来切换另一个元素的可见性（不透明度）。所以到目前为止我一直在使用它：

li:last-child:hover ~ #test{
    opacity: 0 !important;
}

我要切换的元素是一个标有id Test的div。在结构上，我的代码是：

<body onload="javascript that makes the menu...">
    <div id="menu" //this houses the li elements that are created by the javascript></div>
    <div id="test">

但由于某些原因，我改变#test元素的代码没有任何效果。但是，如果我尝试更改最后一个列表元素本身的样式，它可以正常工作。

如何修复此CSS以使其实际影响#test元素？

Answer 1

如果您希望元素上的悬停事件影响另一个不是原始子元素的元素，则需要使用javascript。

<强> CSS

.transparent{
opacity: 0 !important;
}

编辑：您需要确保在 HTML 之后包含jQuery ，或将其包装在ready块中。

<强>的jQuery

$(document).ready(function () { $('li:last-child').hover(function () { $('#test').addClass('transparent'); //mouseover }, function () { $('#test').removeClass('transparent'); //mouseout }); });

从javascript中创建的列表中更改一个元素的CSS

1 个答案: