这是代码:
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu">
<div class="hamburger hamburger--arrow">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</a>
<nav class="gn-menu-wrapper gn-open-part">
<div class="gn-scroller">
<ul class="gn-menu">
<li><a class="gn-icon" id="calendar" href="http://remindbuddy.com/main.php">Calendar</a>
</li>
<li>
<a class="gn-icon self" href="http://remindbuddy.com/self.php">Add For Self</a>
</li>
<li><a class="gn-icon events" href="http://remindbuddy.com/events.php">Events</a></li>
<li><a class="gn-icon view" href="http://remindbuddy.com/contacts.php">View Contacts</a></li>
<li>
<a class="gn-icon add" id="toggle">Add Contact</a>
<ul id="panel" style="display:none">
<li><a href="http://remindbuddy.com/professional.php" <?php if($_SESSION['pro']==0){echo 'style="pointer-events: none;"';}?>>Professional</a></li>
<li><a href="http://remindbuddy.com/personal.php">Personal</a></li>
</ul>
</li>
<li><a class="gn-icon profile" href="http://remindbuddy.com/profile.php">Profile</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li class="pageTitle"><a href="#"class="title">Profile</a></li>
</ul>
<span class="left" id="calendarTool">Calendar</span>
我想要的是,将鼠标悬停在
li#calendar
上以更改span#calendarTool.
的css属性我试过了:
#calendar:hover #calendarTool,
#calendar:hover + #calendarTool,
#calendar:hover ~ #calendarTool
但是似乎没有任何效果,如何在给定的情况下完成这项工作。
提前谢谢!
最佳答案
#calendar
不是#calendarTool
的同级或父级,因此您将无法利用CSS来处理此问题。这将需要JS / Jquery或html的重组,以便#calendarTool
是#calendar
的同级或嵌套在下
快速Jquery示例:JS Fiddle
$('#calendar').on('mouseover', function() {
$('#calendarTool').css('background', 'blue');
});
$('#calendar').on('mouseout', function() {
$('#calendarTool').css('background', 'transparent');
});