Pertanyaan Bagaimana cara menulis: arahkan kursor di CSS sebaris?


Saya memiliki kasus di mana saya harus menulis kode CSS inline, dan saya ingin menerapkan gaya hover pada anchor.

Bagaimana saya bisa menggunakan a:hover di CSS sebaris di dalam atribut gaya HTML?

Misalnya. Anda tidak dapat menggunakan kelas CSS dalam email HTML.


800
2018-06-23 15:07


asal


Jawaban:


Jawaban singkat: Anda tidak bisa.

Jawaban panjang: Anda tidak seharusnya.

Berikan nama kelas atau id dan gunakan stylesheet untuk menerapkan gaya.

:hover adalah pseudo-selector dan, untuk CSS, hanya memiliki makna di dalam style sheet. Tidak ada persamaan gaya sejajar (karena tidak mendefinisikan kriteria pemilihan).

Menanggapi komentar OP:

Lihat CSS benar-benar Pwn dengan Javascript untuk naskah yang bagus tentang menambahkan aturan CSS secara dinamis. Juga lihat Ubah style sheet untuk beberapa teori tentang masalah ini.

Selain itu, jangan lupa, Anda dapat menambahkan tautan ke stylesheet eksternal jika itu adalah opsi. Sebagai contoh,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Perhatian: asumsi di atas ada kepala bagian.


464
2018-06-23 15:09



Anda bisa mendapatkan efek yang sama dengan mengubah gaya Anda dengan JavaScript di onMouseOver dan onMouseOut parameter, meskipun sangat tidak efisien jika Anda perlu mengubah lebih dari satu elemen:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Juga, saya tidak ingat pasti jika this bekerja dalam konteks ini. Anda mungkin harus mengubahnya dengan document.getElementById('idForLink').


334
2018-06-23 15:16



Lebih akurat untuk dikatakan, kamu bisa melakukannya di beberapa titik di masa lalu. Tapi sekarang (menurut revisi terbaru dari standar yang sama, yaitu Rekomendasi Kandidat) Anda tidak bisa     ...


44
2018-03-27 05:59



Saya sangat terlambat berkontribusi untuk ini, namun saya sedih melihat tidak ada yang menyarankan ini, jika Anda benar-benar memerlukan kode inline, ini mungkin untuk dilakukan. Saya membutuhkannya untuk beberapa tombol mengambang, metodenya adalah ini:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

Dalam hal ini, kode inline: "background-color: red;" adalah warna saklar di hover, masukkan warna yang Anda butuhkan ke sana dan kemudian solusi ini berfungsi. Saya menyadari ini mungkin bukan solusi sempurna dalam hal kompatibilitas tetapi ini bekerja jika benar-benar diperlukan.


32
2017-08-10 09:41



Anda tidak bisa melakukan persis seperti yang Anda gambarkan, sejak itu a:hover adalah bagian dari pemilih, bukan aturan CSS. Sebuah stylesheet memiliki dua komponen:

selector {rules}

Gaya sebaris hanya memiliki aturan; pemilih secara implisit menjadi elemen saat ini.

Pemilih adalah bahasa ekspresif yang menggambarkan sekumpulan kriteria untuk mencocokkan elemen dalam dokumen mirip XML.

Namun, Anda bisa mendekat, karena a style set secara teknis bisa pergi paling mana saja:

<html>
    <style>
    #uniqueid:hover {do:something;}
    </style>
    <a id="uniqueid">hello</a>
 </html>

26
2018-06-23 15:10



1) Menambahkan gaya sebaris menggunakan Javascript:

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

atau metode sedikit lebih keras:

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

2) gaya multi-kata dalam Javascript:

element.style.fontSize="12px"


24
2017-07-22 08:33



Deklarasi pseudoclass inline tidak didukung dalam iterasi CSS saat ini (meskipun, dari apa yang saya pahami, itu mungkin datang dalam versi mendatang).

Untuk saat ini, taruhan terbaik Anda mungkin hanya mendefinisikan blok gaya tepat di atas tautan yang ingin Anda gaya:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

10
2018-06-23 15:11



<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover adalah kelas pseudo, sehingga tidak dapat diterapkan dengan atribut gaya. Ini adalah bagian dari pemilih.


4
2018-06-23 15:10