การเปลี่ยน CSS ขององค์ประกอบย่อยเมื่อพาวเวอร์หลัก

159

ก่อนอื่นฉันสมมติว่ามันซับซ้อนเกินไปสำหรับ CSS3 แต่ถ้ามีวิธีแก้ปัญหาในบางแห่งฉันก็อยากจะไปกับมันแทน

HTML นั้นค่อนข้างตรงไปตรงมา

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

div ลูกถูกตั้งค่าให้แสดง: none; โดยค่าเริ่มต้น แต่เปลี่ยนเป็น display: block; เมื่อวางเมาส์ไว้เหนือ div parent ปัญหาคือมาร์กอัปนี้ปรากฏในหลาย ๆ ที่บนเว็บไซต์ของฉันและฉันต้องการให้เด็กแสดงถ้าเมาส์อยู่เหนือมันและไม่ใช่ถ้าเมาส์อยู่เหนือผู้ปกครองคนอื่น ๆ (พวกเขาทั้งหมดมีคลาสเดียวกัน ชื่อและไม่มี ID)

ฉันพยายามใช้$(this)และ.children()ไม่เป็นประโยชน์

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

— ฮาร์ทลี่โบรดี้
แหล่งที่มา

260

ทำไมไม่ใช้แค่ CSS?

.parent:hover .child, .parent.hover .child { display: block; }

จากนั้นเพิ่ม JS สำหรับ IE6 (ภายในความคิดเห็นตามเงื่อนไข) ซึ่งไม่รองรับ: โฮเวอร์อย่างถูกต้อง:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

นี่คือตัวอย่างรวดเร็ว: ซอ

— สตีเฟ่น
แหล่งที่มา

รหัสนั้นไม่ทำงานสำหรับฉัน มันควรจะพูดว่า ".parent.hover" และไม่ใช่ ".parent: hover" หรือไม่ กรณีฉันไม่เคยเห็นสิ่งที่คุณมีมาก่อน และเครื่องหมายจุลภาคไม่ได้ระบุว่ามีหลายตัวเลือกที่ใช้สไตล์เดียวกันหรือไม่ ฉันไม่เห็นว่ามันช่วยได้อย่างไร ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับ CSS นั้นโปรด 0 =]

— Hartley Brody

6

:hoverเป็นหนึ่งใน "Dynamic pseudo-classes" ที่กำหนดโดย CSS2 ( นี่คือข้อมูลจำเพาะ ) นี่เป็นตัวอย่างอย่างรวดเร็ว: http://jsfiddle.net/5FLr4/ มันใช้งานได้สำหรับฉัน

— ลี

อ่าขอบคุณมาก! ฉันมีการวางตำแหน่งสัมพัทธ์ที่ผลักข้อความเด็กออกไป ... doh! >. <ฉันขอขอบคุณความช่วยเหลือ!

— Hartley Brody

เห็นได้ชัดว่าสิ่งนี้จะไม่ทำงานสำหรับ. child :: - webkit-scrollbar-thumb หากคุณต้องการเปลี่ยนไฮไลต์ของแถบเลื่อนภายในองค์ประกอบลูก

— thdoan

1

.parent:not(:hover) .child { display: none; }ดูเหมือนว่าจะทำงานได้ดีสำหรับฉันแม้ว่าฉันจะไม่กังวลกับ IE6 แน่นอน แต่วิธีนี้ฉันสามารถใช้กับองค์ประกอบที่ฉันไม่ต้องการให้มีdisplayคุณสมบัติเหมือนกัน

— แบลร์คอนนอลลี่

147

ไม่จำเป็นต้องใช้ JavaScript หรือ jQuery CSS ก็เพียงพอแล้ว:

.child{ display:none; }
.parent:hover .child{ display:block; }

ดูตัวอย่าง

— Ali Adravi
แหล่งที่มา

9

toggleClass()ใช้

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

ที่ไหน colorเป็นชั้น คุณสามารถจัดชั้นเรียนตามที่คุณต้องการเพื่อให้บรรลุพฤติกรรมที่คุณต้องการ ตัวอย่างแสดงให้เห็นถึงวิธีการเพิ่มและลบคลาสเมื่อเมาส์เข้าและออก

ตรวจสอบตัวอย่างการทำงานที่นี่

— ฮุสเซน
แหล่งที่มา

7

.parent:hover > .child {
    /*do anything with this child*/
}

— Amir Rahman
แหล่งที่มา

3

คำตอบของสตีเฟ่นนั้นถูกต้อง แต่นี่คือคำตอบของฉันที่ปรับได้

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

คุณสามารถดูตัวอย่างนี้ทำงานมากกว่าที่ jsFiddle

— Roger Roelofs
แหล่งที่มา

3

ฉันมีสิ่งที่ฉันคิดว่าเป็นทางออกที่ดีกว่าเนื่องจากสามารถปรับได้ในระดับที่มากขึ้นตามที่ต้องการไม่ใช่แค่สองหรือสามอย่าง

ฉันใช้เส้นขอบ แต่ก็สามารถทำได้ด้วยสไตล์ที่ต้องการเช่นสีพื้นหลัง

ด้วยเส้นขอบความคิดคือ:

มีสีเส้นขอบที่แตกต่างกันเพียงหนึ่ง div ใน div ที่เมาส์อยู่ไม่ได้อยู่ในผู้ปกครองใด ๆ ไม่ได้อยู่ในลูกใด ๆ ดังนั้นจึงสามารถมองเห็นชายแดน div เท่านั้นในสีที่แตกต่างกันในขณะที่ส่วนที่เหลืออยู่ในสีขาว

คุณสามารถทดสอบได้ที่: http://jsbin.com/ubiyo3/13

และนี่คือรหัส:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

— z666zz666z
แหล่งที่มา

สิ่งนี้ไม่ได้ทำในสิ่งที่คำถามถาม มันเปลี่ยนเส้นขอบรอบองค์ประกอบที่อยู่เหนือ ไม่ใช่เส้นขอบรอบองค์ประกอบลูก

— jenniwren

2

หากคุณกำลังใช้การใส่สไตล์Twitter Bootstrapและฐาน JS สำหรับเมนูแบบเลื่อนลง:

.child{ display:none; }
.parent:hover .child{ display:block; }

นี่คือชิ้นส่วนที่ขาดหายไปเพื่อสร้างแถบเลื่อนแบบหล่นลง (ซึ่งไม่น่ารำคาญ)

พฤติกรรมคือ:
1. เปิดเมื่อมีการคลิกปิดเมื่อคลิกอีกครั้งที่ใดก็ได้บนหน้า
2. ปิดโดยอัตโนมัติเมื่อเลื่อนเมาส์ออกจากองค์ประกอบของเมนู

— R Tobin
แหล่งที่มา

2

ไม่แน่ใจว่ามีสาเหตุที่น่ากลัวในการทำเช่นนี้หรือไม่ แต่ดูเหมือนว่าจะทำงานร่วมกับฉันใน Chrome / Firefox เวอร์ชันล่าสุดโดยไม่มีปัญหาด้านประสิทธิภาพที่มองเห็นได้พร้อมองค์ประกอบจำนวนมากบนหน้าเว็บ

*:not(:hover)>.parent-hover-show{
    display:none;
}

แต่ด้วยวิธีนี้สิ่งที่คุณต้องมีก็คือใช้parent-hover-showกับองค์ประกอบและส่วนที่เหลือจะได้รับการดูแลและคุณสามารถรักษาประเภทการแสดงผลเริ่มต้นที่คุณต้องการโดยไม่ต้องเป็น "บล็อก" หรือสร้างหลายคลาสสำหรับแต่ละประเภท

— Brian Leishman
แหล่งที่มา

0

หากต้องการเปลี่ยนจาก css คุณไม่จำเป็นต้องตั้งคลาสลูก

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }

— hamboy75
แหล่งที่มา