Удалить класс при зависании

У меня есть горизонтальный аккордеон, построенный исключительно в CSS. У закрытых элементов аккордеона каждый графический значок и текст, заключенный в класс P.Удалить класс при зависании

Мне нужен класс P, который нужно удалить на ВСЕХ предметов аккордеона, когда мышь нависает над одним элементом аккордеона.

Что мне здесь не хватает ?!

Заранее благодарен!

Вот ссылка на рабочем горизонтальный аккордеон: robertrhu.net/vail/tier2.html

Вот код, который я пытаюсь сделать работу без толка ..

Javascript:

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

HTML

<!--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>

источник

2016-08-11 user5176291

Попробуйте это:

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

Вы хотите применить toggleClass к ребенку "р" элементы "этого" (текущий Li).

источник

2016-08-11 20:17:44 mrsBurnside

Спасибо за быстрый ответ! Реализовано это редактирование и до сих пор нет кубиков, удаляющих класс. Хотя я понимаю, что в своем исходном коде я переключил не тот класс. Я не хочу переключать «значок-контейнер», а скорее «p.horizontal-accordion-resort-name». Вот редактирование, которое я сделал. Получил это, чтобы сделать что-то, но не то, что я хочу, чтобы он делал. $ ("li.horizontal-accordion-item"). Hover (function() { $ (this) .children ("p"). ToggleClass ("horizontal-accordion-resort-name"); }) ; Вот ссылка на страницу, где вы можете увидеть результат: robertrhu.net/vail/tier2.html – user5176291

Это, кажется, переключает название курорта li, которое я наводил. Затем он добавляет его в контейнер, когда он открывается. Мне нужно удалить p. horizontal-accordion-resort-name из окружающих li, внутри других элементов аккордеона, когда литологический аккордеон навешивается. Затем, как только мышь будет удалена, класс p.horizontal-accordion-resort-name вернется на место. Правильное направление! Все еще в тупике. Мои javascript отбивные не до табака. : P Спасибо миллион за помощь! – user5176291

Если вы хотите, чтобы все элементы p исчезали, когда вы наводите курсор на элемент списка, попробуйте следующее: [code] $ ("li.horizontal-accordion-item"). Hover (function() { $ (это) .parent(). children ("li"). children ("p"). toggleClass ("horizontal-accordion-resort-name"); }); [/ code] – mrsBurnside

ОК ... снова посмотрел, я думаю, вы хотите сделать больше, чем переключить стиль. Если вы хотите показать/скрыть элемент 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(); 
});

источник

2016-08-12 16:00:40 mrsBurnside

Еще раз спасибо за ответ и помощь! Таким образом, это приближается. Это приводит к удалению названия курорта из элемента аккордеона, который завис, и навсегда его удаляет. Название курорта не возвращается при удалении наведения, и оно не удаляет название курорта из других предметов аккордеона. Вот ссылка с ним в действии: robertrhu.net/vail/tier2.html – user5176291

Я получил его! Спасибо миллион за ваше руководство и прямое написание кода!

Просто нужно настроить эффект затухания.

$("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"); });

источник

2016-08-12 23:00:38 user5176291

ответ

Смежные вопросы