Bagaimana cara menulis: melayang di inline CSS?

1018

Saya memiliki kasus di mana saya harus menulis kode CSS sebaris, dan saya ingin menerapkan gaya melayang pada jangkar.

Bagaimana saya bisa menggunakan a:hoverinline CSS di dalam atribut style HTML?

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

html  css  inline-styles 
— Amr Elgarhy
sumber
24
Menanamkan html ke dalam aplikasi blog juga sering membutuhkan penggunaan gaya inline secara eksklusif. Terutama jika Anda menanamkan html melalui klien pihak ketiga dan tidak memiliki akses ke tema pengguna.
— providence
8
Ada standar CSS yang diusulkan untuk ini; tidak tahu seperti apa dukungan browser yang mungkin dimilikinya (petunjuk: mereka dapat menggunakan tag khusus seperti -moz, dll): w3.org/TR/2002/WD-css-style-attr-20020515
— Kato
1
— Synetech
17
Oh ayolah. Kadang-kadang Anda hanya membuat prototipe halaman arahan dan Anda tidak ingin harus pergi fork lembar gaya atau membuat cabang template baru atau apa pun hanya untuk menguji apakah tombol hijau berfungsi lebih baik. Sheesh.
— ElBel
1
@FriendlyNeroundIdiot Halaman ini berusia 13 tahun, konsep telah ditinggalkan sejak.
— Tofandel

Jawaban:

573

Jawaban singkat: Anda tidak bisa.

Jawaban panjang: Anda seharusnya tidak.

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

:hoveradalah pseudo-selector dan, untuk CSS , hanya memiliki arti di dalam style sheet. Tidak ada padanan gaya inline (karena tidak mendefinisikan kriteria pemilihan).

Menanggapi komentar OP:

Lihat Totally Pwn CSS dengan Javascript untuk skrip yang bagus tentang menambahkan aturan CSS secara dinamis. Juga lihat Ubah lembar gaya untuk beberapa teori tentang subjek.

Juga, jangan lupa, Anda dapat menambahkan tautan ke stylesheet eksternal jika itu 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: di atas mengasumsikan ada bagian kepala .

— Jonathan Fingland
sumber
4
Anda dapat menambahkan kelas css di javascript
— Jonathan Fingland
204
Ada keadaan lain di mana CSS sebaris adalah satu - satunya pilihan - seperti email HTML (mis. Gmail mengabaikan CSS kecuali jika sebaris). Sayangnya dengan Javascript dilucuti di sebagian besar klien email juga saya belum menemukan cara untuk menambahkan: efek hover.
— Simon East
24
@ Kato sementara itu adalah tautan yang bagus, dan saya benar-benar berharap itu berhasil, sayangnya tidak. Hanya untuk konfirmasi, saya diuji menggunakan sintaks style="{color:green;} :hover { color: red; }"dan firefox berhasil mewarnai tautan hijau, tetapi mengabaikan hover. Chrome mengabaikan keduanya. Pengujian lanjutan akan sangat tidak berguna.
— Jonathan Fingland
9
Saya tidak menyatakannya sebagai solusi kerja. Saya menyatakan bahwa tidak "sepenuhnya" benar untuk mengatakan bahwa tidak ada inline equivalent dan penyeleksi semu tidak memiliki arti di luar stylesheet. Bagaimana itu tidak pantas?
— Kato
5
Mengapa jawaban yang panjang adalah Anda seharusnya tidak ... Anda ... Anda tidak boleh menyamaratakan. Saya mencoba mengirim pesan email dengan html, tetapi coba tebak ... gmail menghapus semua tag gaya, semua referensi gaya eksternal, dan semua skrip. Jadi ... apakah ada cara untuk mengatur warna tautan di dalam email yang dikirim ke gmail? Semoga ya ... harapan adalah yang terakhir mati !!! =)
— Miguel Angelo
435

Anda bisa mendapatkan efek yang sama dengan mengubah gaya Anda dengan JavaScript di onMouseOverdan onMouseOutparameter, 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>
Luaskan cuplikan

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

— Alex S
sumber
12
itu pintar! Berfungsi untuk efek hover warna latar belakang juga<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
— mxro
46
Harus menertawakan ini dilihat sebagai 'pintar' :) Sulit membayangkan bahwa beberapa orang tidak ada ketika ini adalah cara yang menonjol / satu-satunya cara Anda dapat mencapai efek ini. Atau lebih buruk lagi, untuk memiliki 'gambar' dan harus menukar gambar, hanya untuk memberikan efek 'melayang'. Membuatku merasa tua! Tetapi cukup untuk mengatakan, itu menjawab pertanyaan OP :)
— Manachi
5
Saya harus setuju dengan Manachi yang satu ini. Ini seperti kilas balik ke 90-an geocities javascript; P
— Eric Castro
9
Tua, baru, kuno atau di depan. Itu menjawab pertanyaan dan membantu saya. Terima kasih, @peter.
— user2060451
4
Saya perlu melakukan ini untuk email dan itu berhasil. Terima kasih! Ini sebenarnya memecahkan pertanyaan, tidak seperti jawaban yang diterima.
— theUtherSide
53

Anda bisa melakukannya di masa lalu. Tetapi sekarang (menurut revisi terbaru dari standar yang sama, yaitu Rekomendasi Kandidat) Anda tidak bisa.

— fuddin
sumber
3
semua jawaban lain mengatakan bahwa itu tidak mungkin, tetapi jawaban Anda menunjukkan bahwa itu mungkin, jawaban Anda berbeda, saya mengujinya.
— Amr Elgarhy
2
Maaf, saya baru memeriksa tanggal artikel. 10 tahun. Jadi tidak ada jaminan bahwa itu akan berhasil. Jika ya, tolong beri tahu saya juga.
— fuddin
2
Saya menguji ini: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Tetapi tidak berhasil
— Amr Elgarhy
5
Jika ada yang menemukan jawaban ini, penjawab memposting pertanyaan tentang fitur ini di sini: stackoverflow.com/questions/9884182/…
— BoltClock
9
Lebih akurat untuk mengatakan, Anda bisa melakukannya di masa lalu. Tetapi sekarang (menurut revisi terbaru dari standar yang sama, yaitu Rekomendasi Kandidat) Anda tidak bisa .
— Ilya Streltsyn
34

Saya sangat terlambat berkontribusi dalam hal ini, namun saya sedih melihat tidak ada yang menyarankan ini, jika Anda benar-benar memerlukan kode sebaris, ini mungkin dilakukan. Saya membutuhkannya untuk beberapa tombol hover, 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
Luaskan cuplikan

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

— lukesrw
sumber
4
Terima kasih. Itu jawaban yang bagus, saya pikir jawaban ini pasti sebagai solusi.
— Hovhannes Sargsyan
64
Tidak, OP mengatakan mereka menginginkannya dalam CSS inline di dalam atribut style HTML .
— jj_
3
Saya tahu, jj_- namun metode ini memungkinkan Anda untuk menempatkan hanya beberapa baris ke dalam CSS dan menggunakannya berulang kali di banyak tempat, banyak orang (termasuk saya) telah menemukan ini sebagai alternatif yang bermanfaat.
— lukesrw
2
ini harus menjadi jawaban yang sebenarnya, dengan sedikit modifikasi: jangan mengatur warna apa pun dalam gaya, hanya aturan untuk mewarisi dari orangtua ketika melayang, dan kemudian mengatur dua warna sejajar.
— Hayko Koryun
4
Ini hanya cara "normal" untuk melakukannya, yang semua orang katakan adalah cara yang benar. Namun ini bukan cara inline, yang merupakan permintaan awal OP.
— wcndave
31

Anda tidak dapat melakukan apa yang Anda gambarkan, karena a:hovermerupakan bagian dari pemilih, bukan aturan CSS. Lembar gaya memiliki dua komponen:

selector {rules}

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

Selektor adalah bahasa ekspresif yang menjelaskan sekumpulan kriteria untuk mencocokkan elemen dalam dokumen mirip-XML.

Namun, Anda bisa mendekat, karena satu styleset secara teknis bisa pergi ke mana saja:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
— Rex M
sumber
3
Sebenarnya Anda tidak bisa: "HTML mengizinkan sejumlah elemen GAYA di bagian KEPALA dokumen." ( w3.org/TR/html4/present/styles.html#edef-STYLE )
— Éric Araujo
2
Bekerja pada mesin saya. Terima kasih!
— Josh Habdas
@ ÉricAraujo: Kemudian bungkus semua konten ini di bawah <html> </html>tag
— fuddin
30

menggunakan Javascript:

a) Menambahkan gaya inline 

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

b) atau metode yang sedikit lebih sulit - menambahkan "mouseover"

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',''); };

Catatan: gaya multi-kata (yaitu font-size) dalam Javascript ditulis bersama :

element.style.fontSize="12px"

— T.Todua
sumber
3
Karena jawaban ini telah diedit, sekarang tampaknya sama sekali tidak relevan dengan pertanyaan awal ...
— Bill
1
Wow, itu berpikir di luar kotak ... Saya menyukainya!
— theglossy1
14

Ini adalah contoh kode terbaik:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>
Luaskan cuplikan

Saran Moderator: Pertahankan pemisahan kekhawatiran Anda.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
Luaskan cuplikan

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
Luaskan cuplikan

— pengguna1476842
sumber
10

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

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

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— inkedmn
sumber
4
Ide itu untungnya akan hilang. (Lihat lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , di bawah "Draft Kerja yang Diabaikan".)
— Ms2ger
3
Ada sebuah . hilang dalam jawaban ini.
— Joel
9

Seperti yang ditunjukkan, Anda tidak dapat menetapkan gaya sebaris sebarang untuk kursor, tetapi Anda dapat mengubah gaya kursor kursor di CSS menggunakan yang berikut pada tag yang sesuai:

style="cursor: pointer;"
— Rutherford
sumber
2
itu seharusnya menjadi jawaban terbaik
— Vladislav Guleaev
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover adalah kelas pseudo, dan karenanya tidak dapat diterapkan dengan atribut style. Itu adalah bagian dari pemilih.

— Joel
sumber
2
@Derek kalau-kalau masih menarik / untuk orang lain yang membaca: "~ /" (tilde forward slash) adalah referensi sisi server ke root aplikasi di aplikasi web asp.net. (Tentu saja aplikasi root mungkin adalah sub-folder). Penggunaannya di sini tidak akan benar, maka alasan jawabannya telah diedit sejak Anda mengajukan pertanyaan (saya curiga).
— Chris
5

Kamu bisa melakukan ini. Tetapi tidak dalam gaya inline. Anda dapat menggunakan onmouseoverdan onmouseoutacara:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
Luaskan cuplikan

4

Menurut komentar Anda, Anda tetap mengirim file JavaScript. Lakukan rollover dalam JavaScript. jQuery 's $.hover()metode memudahkan, seperti halnya setiap pembungkus lainnya JavaScript. Tidak terlalu sulit dalam JavaScript langsung.

— Vineel Shah
sumber
Meskipun ini adalah pekerjaan di sekitar tetapi memberikan jawaban yang sangat bagus untuk saya dan jawaban terbaik jika benar-benar tidak mungkin untuk menulis inline hover
— Amr Elgarhy
4

Tidak ada cara untuk melakukan ini. Pilihan Anda adalah menggunakan blok JavaScript atau CSS.

Mungkin ada beberapa pustaka JavaScript yang akan mengonversi atribut gaya kepemilikan ke blok gaya. Tetapi kemudian kode tersebut tidak akan memenuhi standar.

— m_vitaly
sumber
2

Saya baru saja menemukan solusi yang berbeda.

Masalah saya: Saya memiliki <a>tag di sekitar beberapa slide / penampil konten utama serta <a>tag di footer. Saya ingin mereka pergi ke tempat yang sama di IE, sehingga seluruh paragraf akan digarisbawahi onHover, meskipun mereka bukan tautan: slide secara keseluruhan adalah tautan. IE tidak tahu bedanya. Saya juga memiliki beberapa tautan aktual di catatan kaki saya yang perlu garis bawah dan perubahan warnaonHover . Saya pikir saya harus meletakkan style sejajar dengan tag footer untuk membuat perubahan warna, tetapi saran dari atas menunjukkan bahwa ini tidak mungkin.

Solusi: Saya memberi footer tautan dua kelas yang berbeda, dan masalah saya terpecahkan. Saya dapat memiliki onHoverperubahan warna dalam satu kelas, memiliki slide onHovertidak memiliki perubahan warna / garis bawah, dan masih dapat memiliki HREFS eksternal di footer dan slide pada saat yang sama!

— Liz
sumber
1

Saya setuju dengan bayangan . Anda dapat menggunakan onmouseoverdan onmouseoutacara untuk mengubah CSS melalui JavaScript.

Dan jangan katakan orang harus mengaktifkan JavaScript. Ini hanya masalah gaya, jadi tidak masalah jika ada beberapa pengunjung tanpa JavaScript;) Meskipun sebagian besar Web 2.0 bekerja dengan JavaScript. Lihat Facebook misalnya (banyak JavaScript) atau Myspace .

— Jaysn
sumber
0

Ini agak terlambat dalam permainan, tetapi kapan Anda akan menggunakan JavaScript dalam Email HTML? Misalnya, di perusahaan tempat saya bekerja saat ini (berima dengan Abodee), kami menggunakan penyebut umum terendah untuk sebagian besar kampanye pemasaran email - dan JavaScript tidak digunakan. Pernah. Kecuali jika Anda merujuk pada semacam pra-pemrosesan.

Seperti yang disebutkan dalam posting terkait: "Lotus Notes, Mozilla Thunderbird, Outlook Express, dan Windows Live Mail semuanya tampaknya mendukung semacam eksekusi JavaScript. Tidak ada yang lain."

Tautan ke artikel dari mana ini diambil: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Juga, bagaimana cara melayang menerjemahkan ke perangkat seluler? Itu sebabnya saya suka jawaban dari atas:Long answer: you shouldn't.

Jika ada yang memiliki lebih banyak wawasan tentang subjek ini, silakan koreksi saya. Terima kasih.

— Shawn Spencer
sumber
0

Jadi ini bukan yang dicari pengguna, tapi saya menemukan pertanyaan ini mencari jawaban dan menemukan sesuatu yang berhubungan. Saya memiliki banyak elemen berulang yang membutuhkan warna baru / hover untuk tab di dalamnya. Saya menggunakan setang, yang merupakan kunci solusi saya, tetapi bahasa templat lainnya juga dapat berfungsi.

Saya mendefinisikan beberapa warna dan menyerahkannya ke template setang untuk setiap elemen. Di bagian atas template saya mendefinisikan tag gaya, dan memasukkan kelas kustom saya dan mengarahkan warna.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Lalu saya menggunakan style pada template:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Anda mungkin tidak perlu !important

— webhound
sumber
0

Anda dapat menulis kode dalam berbagai jenis

pertama saya bisa menulis ini

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

Anda dapat mencoba cara lain

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

Anda juga dapat mencoba mengarahkan di jquery

skrip java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

dalam kode ini Anda memiliki tiga fungsi dalam jquery pertama Anda siap fungsi yang merupakan dasar fungsi jquery kemudian kedua Anda memiliki fungsi hover dalam fungsi ini ketika Anda mengarahkan pointer ke teks warna akan berubah dan kemudian berikutnya ketika Anda melepaskan pointer ke teks itu akan menjadi warna yang berbeda dan ini adalah fungsi ketiga

— Siraj Ahmed
sumber
Harap hindari memposting jawaban duplikat
— Simas Joneliunas
ok sir simas-joneliunas
— Siraj Ahmed
Tak satu pun dari pendekatan ini memecahkan masalah yang diungkapkan dalam pertanyaan. Anda tidak dapat menggunakan JS dalam email berformat HTML sama sekali, dan pendekatan lain yang Anda sarankan menggunakan kelas yang secara eksplisit dikesampingkan.
— Quentin
-1

Saya harus menghindari javascript, tetapi bisa menggunakan kode sisi server.

jadi saya membuat id, membuat blok gaya, membuat tautan dengan id itu. Ya, HTML yang valid.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
Luaskan cuplikan

— BananaAcid
sumber
-2

Anda dapat menggunakan pseudo-class hanya a:hoverdi style sheet eksternal. Karena itu saya sarankan menggunakan style sheet eksternal. Kode tersebut adalah:

a:hover {color:#FF00FF;}   /* Mouse-over link */
— pengguna1466310
sumber
Tentunya Anda tidak membutuhkan lembaran eksternal, cukup gunakan styletag.
— Dmitri Zaitsev
-2

Anda dapat melakukan id dengan menambahkan kelas tetapi tidak pernah sebaris.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 baris tetapi Anda dapat menggunakan kembali kelas di mana saja.

— bug
sumber
-3

Masalah saya adalah bahwa saya sedang membangun sebuah situs web yang menggunakan banyak ikon gambar yang harus ditukar dengan gambar yang berbeda di hover (mis. Gambar blue-ish menjadi red-ish on hover). Saya menghasilkan solusi berikut untuk ini:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Saya memperkenalkan wadah berisi sepasang gambar. Yang pertama terlihat dan yang lainnya disembunyikan (tampilan: tidak ada). Saat mengarahkan wadah, yang pertama menjadi tersembunyi (tampilan: tidak ada) dan yang kedua muncul lagi (tampilan: blok).

— Jochem Geussens
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.