Gaya sebaris untuk bertindak sebagai: hover di CSS

91

Saya tahu bahwa menyematkan gaya CSS langsung ke tag HTML pengaruhnya akan mengalahkan sebagian besar tujuan CSS, tetapi terkadang berguna untuk tujuan debugging, seperti dalam:

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

Seperti apa sintaks untuk menyematkan aturan seperti:

a:hover {text-decoration: underline;}

ke dalam atribut gaya dari sebuah tag? Jelas bukan ini ...

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

... karena itu akan berlaku setiap saat, bukan hanya selama hover.

html css

— raldi
sumber

Secara teoritis, jika Anda mencoba membuat hover menjadi dinamis, Anda dapat menggunakan javascript untuk memasukkan aturan hover ke dalam stylesheet menggunakan daftar window.document.styleSheets dari sheet yang ada.

— GAgnew

Lihat juga stackoverflow.com/questions/5293280/…

— rogerdpack

95

Saya khawatir itu tidak dapat dilakukan, pemilih kelas-semu tidak dapat diatur secara in-line, Anda harus melakukannya di halaman atau di lembar gaya.

Saya harus menyebutkan bahwa secara teknis Anda harus dapat melakukannya sesuai dengan spesifikasi CSS , tetapi sebagian besar browser tidak mendukungnya

Sunting: Saya baru saja melakukan tes cepat dengan ini:

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

Dan itu tidak berfungsi di IE7, IE8 beta 2, Firefox atau Chrome. Adakah yang bisa menguji di browser lain?

— Glenn Slaven
sumber

3

Itu adalah draf kerja CSS 3 dengan prioritas sangat rendah yang belum diperbarui dalam enam tahun. Dari spesifikasi: 'Tidak pantas menggunakan Draf Kerja W3C sebagai bahan referensi atau mengutipnya sebagai selain "pekerjaan dalam proses." '

— Jim

1

Benar, tetapi browser menerapkan beberapa aturan CSS3, seharusnya mungkin kata yang salah dalam konteks ini

— Glenn Slaven

Browser biasanya menerapkan fitur CSS yang berada dalam status pengembangan lebih lanjut, misalnya opasitas berasal dari Warna CSS (Panggilan Terakhir) dan Media Queries adalah Rekomendasi Kandidat.

— Jim

Bukankah style = ": hover {}" sama dengan "a {: hover {}}" di stylesheet? Itu jelas merupakan kesalahan sintaksis.

— Kornel

32

Jawaban ini telah diposting lama sekali, banyak hal telah berubah sejak itu dan versi terkini dari spesifikasi W3C yang relevan - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - dengan jelas mengatakan bahwa atribut gaya hanya dapat berisi konten dari blok deklarasi CSS. Jadi sekarang tidak mungkin untuk memasukkan elemen pseudo dengan styleatribut.

— Ilya Streltsyn

24

Jika Anda hanya men-debug, Anda dapat menggunakan javascript untuk mengubah css:

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

— Aleksi Yrttiaho
sumber

1

Mencari solusi dengan JSF dan ini membantu saya memperbaikinya. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"

— kdoteu

17

Solusi sederhana:

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

Atau

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

— Roberto
sumber

16

Jika untuk debugging, tambahkan saja kelas css untuk hovering (karena elemen dapat memiliki lebih dari satu kelas):

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

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

— Rodrick Chapman
sumber

2

Ini mungkin yang paling dekat Anda akan mendapatkan efek yang diinginkan

— Glenn Slaven

1

Saya mengumpulkan solusi cepat untuk siapa saja yang ingin membuat popup hover tanpa CSS menggunakan perilaku onmouseover dan 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>

— Josh Kernich
sumber

0

Jika <p>tag tersebut dibuat dari JavaScript, maka Anda memiliki opsi lain: gunakan JSS untuk memasukkan stylesheet secara terprogram ke dalam kepala dokumen. Itu mendukung '&:hover'. https://cssinjs.org/

— michielbdejong
sumber

-2

Saya tidak berpikir jQuery mendukung pseudo-selector, tetapi menyediakan cara cepat untuk menambahkan event ke satu, banyak, atau semua kontrol dan tag serupa Anda pada satu halaman.

Yang terbaik dari semuanya, Anda dapat merangkai event binds dan melakukan semuanya dalam satu baris skrip jika Anda mau. Jauh lebih mudah daripada mengedit semua HTML secara manual untuk mengaktifkan atau menonaktifkannya. Kemudian lagi, karena Anda dapat melakukan hal yang sama di CSS, saya tidak tahu bahwa itu membelikan Anda apa pun (selain mempelajari jQuery).

— CMPalmer
sumber