Question

我有一个纯粹用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>

Answer 1

试试这个：

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

您想将toggleClass应用于“this”（当前li）的子“p”元素。

Answer 2

好的......再看一遍，我觉得你想做的不仅仅是切换风格。如果要使用该horizontal-accordion-resort-name显示/隐藏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"); });

在悬停时删除课程

3 个答案: