วิธีการเขียน: เงื่อนไขการโฮเวอร์สำหรับ: before และ a: after

347

วิธีการเขียน:hoverและ:visitedเงื่อนไขสำหรับa:before?

ฉันพยายามa:before:hoverแต่มันไม่ทำงาน

488

ขึ้นอยู่กับสิ่งที่คุณพยายามทำ

หากคุณเพียงต้องการใช้สไตล์กับ:beforeองค์ประกอบหลอกเมื่อaองค์ประกอบตรงกับคลาสหลอกคุณต้องเขียนa:hover:beforeหรือa:visited:beforeแทน สังเกตุว่าองค์ประกอบหลอกเกิดขึ้นหลังจากคลาสหลอก (และอันที่จริงแล้วในตอนท้ายสุดของตัวเลือกทั้งหมด) โปรดสังเกตว่าพวกเขาเป็นสองสิ่งที่แตกต่างกัน การเรียกพวกเขาทั้ง "pseudo-selectors" จะทำให้คุณสับสนเมื่อคุณพบปัญหาทางไวยากรณ์เช่นปัญหานี้

หากคุณกำลังเขียน CSS3 คุณสามารถแสดงองค์ประกอบหลอกด้วยทวิภาคสองครั้งเพื่อให้ความแตกต่างนี้ชัดเจนยิ่งขึ้น ดังนั้นและa:hover::before a:visited::beforeแต่ถ้าคุณพัฒนาเบราว์เซอร์รุ่นเก่าเช่น IE8 และรุ่นเก่ากว่าคุณสามารถใช้โคลอนเดี่ยวได้ดี

คำสั่งเฉพาะของคลาสหลอกและองค์ประกอบหลอกถูกระบุไว้ในข้อมูลจำเพาะ :

องค์ประกอบหลอกหนึ่งอาจผนวกเข้ากับลำดับสุดท้ายของตัวเลือกง่าย ๆ ในตัวเลือก

ลำดับของตัวเลือกที่เรียบง่ายเป็นห่วงโซ่ของตัวเลือกที่ง่ายที่จะไม่แยกจากกันโดย Combinator มันมักจะเริ่มต้นด้วยตัวเลือกประเภทหรือตัวเลือกสากล ไม่อนุญาตให้ใช้ตัวเลือกชนิดอื่นหรือตัวเลือกสากลในลำดับ

เลือกง่ายเป็นทั้งเลือกชนิดเลือกสากลเลือกแอตทริบิวต์เลือกชั้นเลือก ID หรือหลอกชั้น

คลาสหลอกเป็นตัวเลือกที่ง่าย อย่างไรก็ตามองค์ประกอบหลอกไม่ได้แม้ว่ามันจะคล้ายกับตัวเลือกที่เรียบง่าย

อย่างไรก็ตามสำหรับผู้ใช้แอ็คชันหลอกคลาสเช่น:hover¹หากคุณต้องการให้เอฟเฟกต์นี้ใช้เฉพาะเมื่อผู้ใช้โต้ตอบกับองค์ประกอบหลอกตัวเอง แต่ไม่ใช่aองค์ประกอบดังนั้นจึงเป็นไปไม่ได้ที่นอกเหนือจากการแก้ปัญหาเลย์เอาท์แบบปิดบังบางอย่าง . ตามที่ระบุโดยข้อความองค์ประกอบหลอก CSS มาตรฐานไม่สามารถมีคลาสหลอกได้ในขณะนี้ ในกรณีนั้นคุณจะต้องนำไปใช้:hoverกับองค์ประกอบลูกที่แท้จริงแทนที่จะเป็นองค์ประกอบปลอม

¹ _{แน่นอนว่าสิ่งนี้ไม่ได้ใช้กับลิงค์หลอกเรียนเช่น:visitedในคำถามเนื่องจากองค์ประกอบหลอกไม่ได้เชื่อมโยง}

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

27

ควรชี้ให้เห็นว่าการวางเมาส์ไว้บนองค์ประกอบหลัก - ซึ่งทำให้การตกแต่งถูกนำไปใช้แม้ว่า :: หลังจากหลอกเทียมไม่ได้อยู่ภายใต้เมาส์ตราบใดที่ผู้ปกครองอยู่

— SamGoody

6

มันก็ควรจะตั้งข้อสังเกตว่ามีจำนวนของสิ่งที่ไม่ตอบสนองต่อการนี้เนื่องจากวิธีการที่กฎรูปแบบที่ระบุไว้ - text-decorationเช่น

— Chris Krycho

1

@ Chris Krycho: จริง - จริงผมเกิดขึ้นจะมีคำอธิบายสำหรับปัญหาเฉพาะนี้เกี่ยวกับการหลอกองค์ประกอบที่มีที่นี่ แน่นอนว่ามันคุ้มค่าที่ชัดเจนว่าปัญหาตัวเองมีการเชื่อมต่อกับหลอกชั้น / องค์ประกอบหลอกไม่มีตัวเลือกแต่ในขณะที่คุณชี้ให้เห็นปัญหารูปแบบ

— BoltClock

@BoltClock ฉัน upvoted คำตอบว่ามากไม่นานหลังจากที่ผมออกจากความคิดเห็นนี้ Huzzah

— Chris Krycho

2

Sinlge colon (:) กำหนดคลาส pseudo และ double colon (: :) กำหนดองค์ประกอบ pseudo ดังนั้นควรเป็น: hover :: before

— mikkelbreum

107

เขียนa:hover::beforeแทนa::before:hover: ตัวอย่างเช่น

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

2

@mikkelbreum คุณมีการอ้างอิงเพื่อพิสูจน์ว่า?

— shea

3

@bungeshea: นั่นคือไวยากรณ์ CSS3 ดูความคิดเห็นภายใต้คำตอบของฉัน (รวมถึงการแก้ไขล่าสุดของฉัน) มันไม่ถูกต้องเล็กน้อยที่จะเรียกมันว่า "ไวยากรณ์" ที่ถูกต้อง แต่เนื่องจากทั้งคู่และโคลอนคู่ได้รับอนุญาตสำหรับองค์ประกอบหลอก CSS1 / 2 ฉันจะเรียกมันว่าไวยากรณ์ที่แนะนำแทนเพราะเหตุผลเดียวที่จะใช้ไวยากรณ์แบบเดิมต่อไปในวันนี้คือเพื่อรองรับ IE8 และรุ่นเก่ากว่า

— BoltClock

@mikkelbreum @sheabunge ข้อมูลเพิ่มเติมเกี่ยวกับ CSS2 :afterกับ CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (ซิงเกิ้ล:ได้รับการสนับสนุนที่ดีกว่า)

— travis

มันไม่ทำงานสำหรับขีดเส้นใต้ :( jsfiddle.net/porzechowski/u5dhthvq โปรดเพิ่มแสดงด้วย: inline-block; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

เพื่อเปลี่ยนข้อความของลิงค์เมนูบนเม้าส์ (ข้อความภาษาที่แตกต่างกันในการโฮเวอร์) นี่คือ

ตัวอย่าง jsfiddle

HTML:

<a align="center" href="#"><span>kannada</span></a>

CSS:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

— ราว
แหล่งที่มา

1

นี่เป็นคำตอบที่น่ารัก ในความเป็นจริงมันเป็นแรงบันดาลใจให้ฉันขยายซอของคุณออกไปเล็กน้อยโดยการเพิ่มขนาดตัวอักษรของข้อความขยายเป็น 24px เพื่อให้ตรงกับข้อความที่ถูกแทนที่เพิ่มช่องว่างที่ไม่แบ่ง 3 ช่องก่อนและหลังข้อความทดแทนเพื่อให้พวกเขามีความกว้างเท่าเดิม สไตล์a:hover::beforeด้วยtext-decoration: underlineซึ่งทำให้ขีดเส้นใต้เพื่อรับสีแดงของข้อความทดแทน

— เดฟแลนด์

4

ลองใช้.card-listing:hover::after hoverและafterใช้::มันจะไม่ทำงาน

— subindas pm
แหล่งที่มา

1

คำตอบของ BoltClock ถูกต้อง สิ่งเดียวที่ฉันต้องการผนวกคือถ้าคุณต้องการเลือกองค์ประกอบหลอกเท่านั้นใส่ในช่วง

ตัวอย่างเช่น:

<li><span data-icon='u'></span> List Element </li>

แทน:

<li> data-icon='u' List Element</li>

วิธีนี้คุณสามารถพูดได้

ul [data-icon]:hover::before {color: #f7f7f7;}

ซึ่งจะเน้นองค์ประกอบหลอกเท่านั้นไม่ใช่องค์ประกอบ li ทั้งหมด

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

-2

คุณสามารถ จำกัด การกระทำของคุณให้เป็นคลาสเดียวได้โดยใช้วงเล็บเหลี่ยมขวา (">") ดังที่ฉันได้ทำในรหัสนี้:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

หมายเหตุ:โฮเวอร์: ก่อนสวิตช์จะทำงานเฉพาะในคลาส. test1 เท่านั้น

— Stefan Gruenwald
แหล่งที่มา