Question

以下是代码：

<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

但似乎没有任何效果。如何在给定的场景中完成这项工作。

提前使用Thanxx !!

Answer 1

<script type="text/javascript"> $(function() { var availableTags = <?php include('autocomplete.php'); ?>; $("#department_name").autocomplete({ source: availableTags, autoFocus:true }); }); </script> </head> <body> <label>Department Name</label></br> <input id="department_name" type="text" size="50" /> </body>不是兄弟姐妹，也不是#calendar的父母，所以你无法利用css来处理这个问题。这将需要JS / Jquery或html的重组，以便#calendarTool是#calendarTool下的兄弟或嵌套

快速Jquery示例：JS Fiddle

#calendar

悬停效果对另一个元素的css发生变化

1 个答案: