gpt4 book ai didi

javascript - 从javascript制作的列表中更改一个元素的CSS

转载 作者:太空宇宙 更新时间:2023-11-03 17:48:21 25 4
gpt4 key购买 nike

所以我有创建导航栏的 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 元素?

最佳答案

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

CSS

.transparent{
opacity: 0 !important;
}

编辑:您需要确保在 HTML 之后 包含 jQuery,或者将其包装在 ready block 中。

jQuery

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

关于javascript - 从javascript制作的列表中更改一个元素的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27791529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com