。下面是一个简化但准确的表示。
我还包含了一个可以正常工作的#Hello 测试导航项。这就是为什么我如此困惑。
<div>
<div>
<nav>
<ul>
<li id="mega-menu-item-5128"><a class="mega-menu-link" href="#" tabindex="0">For Parents</a></li>
</ul>
</nav>
</div>
</div>
<div class="TestHello" id="Hello"><a href="#">Hello</a> </div>
<div class="Submenu_Container">
<div id="ForParents_BlueBar">
[Max Mega Menu Plugin Code]
</div>
</div>
出于测试目的，我只是将填充变大并应用了边框，这样我就可以很容易地查看我是否正确地钩住了，我有这个 CSS：
#mega-menu-item-5128:hover ~ #ForParents_BlueBar {
/*display:none!important;*/
border: 2px solid red !important;
padding: 40px !important;
}
它不起作用。
我也试过jQuery（通过functions.php添加）。
function addCustomScript(){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#mega-menu-item-5128').hover(function() {
$('#ForParents_BlueBar').attr('style', 'padding: 100px !important');
}, function() {
$('#ForParents_BlueBar').attr('style', 'padding: 0px !important');
});
});
$(document).ready(function () {
$('#Hello').hover(function() {
$('#ForParents_BlueBar').attr('style', 'padding: 100px !important');
}, function() {
$('#ForParents_BlueBar').attr('style', 'padding: 0px !important');
});
});
</script>
<?php
}
add_action('wp_head', 'addCustomScript');
这对导航没有任何作用，但测试 #Hello 有效。
我一直在尝试我能想到的一切，以及我在互联网上能找到的一切，但没有任何效果。
任何帮助将不胜感激。