在悬停时移除类

Question

我有一个水平手风琴建立纯CSS。关闭的手风琴项目每个都有一个图形图标和文本包装在一个P类中。

当鼠标悬停在单个手风琴项目上时，我需要移除所有手风琴项目上的P类。

我在这里错过了什么？！

提前感谢！

这里有一个指向工作水平手风琴的链接: robertrhu.net/vail/tier2.html

这是我试图使工作无效的代码。

Javascript:

$("li.horizontal-accordion-item").hover(function () {
$(this).children("p").toggleClass("horizontal-accordion-resort-name"); });

<!--HOME POSTS SLIDER HEADING-->
    <h1
        class="horizontal-accordion-main-heading hide-for-medium show-for-small">
        Explore Our Resorts
    </h1>
<!--END HOME POSTS SLIDER HEADING-->

<div
    class="horizontal-accordion hide-for-small show-for-medium">

  <ul
       class="horizontal-accordion-wrapper">

     <li
         class="horizontal-accordion-item">

        <div
            class="icon-container"> 
            <img
               src="assets/img/vail-logo-icon.png"
               class="horizontal-accordion-resort-icon" />
        </div>

        <p
            class="horizontal-accordion-resort-name">
            Vail   
        </p>

        <a
          href="#"
          class="horizontal-accordion-title">                  
       </a>

      <div
         class="horizontal-accordion-content small-up-2">

         <!--POST FEATURED IMAGE FLOATED LEFT-->
         <div
           id="resorts-image-container"
           class="column">

        <img
           src="assets/img/explore-resorts-vertical-sample-photo.jpg"
           class="resort-post-image" />
      </div>

    <!--END POST FEATURED IMAGE FLOATED LEFT-->
       <div
          id="resorts-content-container"
          class="column">
       <img
         src="assets/img/resort-logo-small-park-city.gif"
        class="resort-logo" />

       <h3
         class="resort-slider-heading">
         Explore the largest resort in the U.S.   
       </h3>

       <!--POST EXCERPT-->   
        <p
          class="post-excerpt">
          Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec     ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra     augue.
       </p>
       <!--END POST EXCERPT FLOATED RIGHT-->

       <!--POST CTA BUTTON-->
       <a
         href="#"
         class="button">
         Button CTA
      </a>
      <!--END POST CTA BUTTON-->

       </div>  
     </div>
    </li>      
 </ul>

​

Answer 1

试试这个：

    $("li.horizontal-accordion-item").hover(function () {
    $(this).children("p").toggleClass("icon-container");
 });

您希望将toggleClass应用于"this“(当前li)的子元素"p”。

Answer 2

好吧..。再看一看，我想你要做的不仅仅是切换一种风格。如果要显示/隐藏具有水平手风琴度假胜地名称的p元素，请尝试如下：

  $("li.horizontal-accordion-item").hover(function () {
    $(this).children("p.horizontal-accordion-resort-name").hide();
 });
    $("li.horizontal-accordion-item").blur(function () {
    $(this).children("p.horizontal-accordion-resort-name").show();
 });

Answer 3

这样啊，原来是这么回事!感谢一百万您的指导和直接的代码编写！

只需要调整褪色效果。

$("li.horizontal-accordion-item").mouseenter(function () {
    $(this).parent().children("li").children("p").fadeOut("horizontal-accordion-resort-name"); });

$("ul.horizontal-accordion-wrapper").mouseleave(function () {
$(this).children("li").children("p").fadeIn("horizontal-accordion-resot-name"); });