สไตล์อินไลน์เพื่อทำหน้าที่เป็น: วางเมาส์เหนือ CSS

ฉันรู้ว่าการฝังสไตล์ CSS ลงในแท็ก HTML โดยตรงจะส่งผลต่อการเอาชนะจุดประสงค์ส่วนใหญ่ของ CSS แต่บางครั้งก็มีประโยชน์สำหรับการดีบักเช่นใน:

<p style="font-size: 24px">asdf</p>

ไวยากรณ์สำหรับการฝังกฎเป็นอย่างไร:

a:hover {text-decoration: underline;}

ลงในแอตทริบิวต์สไตล์ของแท็ก A? ไม่ชัดนี่ ...

<a href="foo" style="text-decoration: underline">bar</a>

... เนื่องจากจะมีผลตลอดเวลาซึ่งต่างจากเพียงแค่ในระหว่างการวางเมาส์

ฉันกลัวว่าจะทำไม่ได้ตัวเลือกคลาสหลอกไม่สามารถตั้งค่าในบรรทัดได้คุณจะต้องทำในเพจหรือในสไตล์ชีท

ฉันควรพูดถึงว่าในทางเทคนิคคุณควรจะทำได้ตามข้อกำหนดของ CSSแต่เบราว์เซอร์ส่วนใหญ่ไม่รองรับ

แก้ไข:ฉันเพิ่งทำการทดสอบอย่างรวดเร็วกับสิ่งนี้:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

และไม่สามารถใช้งานได้ใน IE7, IE8 beta 2, Firefox หรือ Chrome ใครสามารถทดสอบในเบราว์เซอร์อื่น ๆ ได้หรือไม่?

หากคุณเป็นเพียงการดีบักคุณอาจใช้ javascript เพื่อแก้ไข css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

วิธีง่ายๆ:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

หรือ

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

หากมีไว้สำหรับการดีบักเพียงเพิ่มคลาส css สำหรับการวางเมาส์ (เนื่องจากองค์ประกอบสามารถมีได้มากกว่าหนึ่งคลาส):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

ฉันรวบรวมวิธีแก้ปัญหาอย่างรวดเร็วสำหรับทุกคนที่ต้องการสร้างโฮเวอร์ป๊อปอัปโดยไม่ใช้ CSS โดยใช้พฤติกรรม onmouseover และ onmouseout

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

หาก<p>แท็กนั้นสร้างขึ้นจาก JavaScript คุณจะมีทางเลือกอื่น: ใช้ JSS เพื่อแทรกสไตล์ชีตโดยใช้โปรแกรมลงในส่วนหัวของเอกสาร '&:hover'มันไม่สนับสนุน https://cssinjs.org/

ฉันไม่คิดว่าjQueryรองรับ pseudo-selectors เช่นกัน แต่มันมีวิธีที่รวดเร็วในการเพิ่มเหตุการณ์ลงในการควบคุมและแท็กที่คล้ายกันหลายรายการหรือทั้งหมดของคุณในหน้าเดียว

เหนือสิ่งอื่นใดคุณสามารถเชื่อมโยงการโยงเหตุการณ์และทำทั้งหมดในสคริปต์บรรทัดเดียวได้หากต้องการ ง่ายกว่าการแก้ไข HTML ทั้งหมดด้วยตนเองเพื่อเปิดหรือปิด จากนั้นอีกครั้งเนื่องจากคุณสามารถทำเช่นเดียวกันใน CSS ฉันไม่รู้ว่ามันซื้ออะไรให้คุณ (นอกเหนือจากการเรียนรู้ jQuery)