Nasıl yazılır: satır içi CSS'de fareyle üzerine gelin mi?

1016

Satır içi CSS kodu yazmam gereken bir durum var ve bir çapa üzerinde fareyle üzerine gelme stili uygulamak istiyorum.

a:hoverHTML stili özelliği içinde satır içi CSS'yi nasıl kullanabilirim ?

Örneğin, HTML e-postalarında CSS sınıflarını güvenilir bir şekilde kullanamazsınız.

html  css  inline-styles 
— Amr Elgarhy
kaynak
24
Html'nin blog uygulamalarına gömülmesi, genellikle satır içi stillerin özel kullanımını gerektirir. Özellikle, html'yi üçüncü taraf bir istemci aracılığıyla gömüyorsanız ve kullanıcının temalarına erişiminiz yoksa.
— Provence
8
Bunun için önerilen bir CSS standardı vardır; ne tür bir tarayıcı desteğine sahip olabileceğini bilmiyorlar (ipucu: -moz vb. gibi özel etiketleri kullanıyor olabilirler): w3.org/TR/2002/WD-css-style-attr-20020515
— Kato
1
— Kasım'da Synetech
17
Ah, hadi ama. Bazen sadece bir açılış sayfası prototipi oluşturuyorsunuz ve stil sayfalarını çatallamak veya yeni bir şablon dalı oluşturmak veya yeşil düğmenin daha iyi çalışıp çalışmadığını test etmek için ne yapmak zorunda kalmazsınız. Sheesh.
— ElBel
1
@FriendlyNeighborhoodIdiot Bu sayfa 13 yaşında, taslak o zamandan beri terk edildi.
— Tofandel

Yanıtlar:

573

Kısa cevap: yapamazsınız.

Uzun cevap: Yapmamalısın.

Bir sınıf adı veya kimliği verin ve stili uygulamak için stil sayfalarını kullanın.

:hoversahte bir seçicidir ve CSS için yalnızca stil sayfasında anlam ifade eder. Satır içi stil eşdeğeri yoktur (seçim ölçütlerini tanımlamadığı için).

OP'nin yorumlarına yanıt:

Dinamik olarak CSS kuralları eklemeyle ilgili iyi bir komut dosyası için Javascript ile Tamamen Pwn Cwn bölümüne bakın . Ayrıca konuyla ilgili bazı teoriler için Stil sayfasını değiştirme bölümüne bakınız .

Ayrıca, bir seçenekse harici stil sayfalarına bağlantılar ekleyebilirsiniz. Örneğin,

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

Dikkat: Yukarıdaki bölüm bir kafa bölümü olduğunu varsayar .

— Jonathan Fingland
kaynak
4
javascript'te css sınıfları ekleyebilirsiniz
— Jonathan Fingland
204
HTML e-postaları gibi satır içi CSS'nin tek seçenek olduğu başka durumlar da vardır (ör. Gmail, satır içi olmadıkça CSS'yi yok sayar). Ne yazık ki Javascript çoğu e-posta istemcisinde de sıyırdı ile henüz ekleme yolu bulamadım: vurgulu efektler.
— Simon East
24
@Kato harika bir bağlantı olsa da, gerçekten çalışmasını diliyorum, ne yazık ki değil. Sadece onaylamak için, sözdizimini kullanarak test ettim style="{color:green;} :hover { color: red; }"ve firefox bağlantıyı yeşil renklendirmeyi başardı, ancak fareyle üzerine gelindi. Chrome her ikisini de yok saydı. Devam eden testler oldukça anlamsız olurdu.
— Jonathan Fingland
9
Çalışan bir çözüm olarak söylemedim. Satır içi eşdeğer olmadığını ve sözde seçicilerin stil sayfalarının dışında bir anlamı olmadığını söylemek için "tamamen" doğru olmadığını belirttim. Bu nasıl uygunsuz?
— Kato
5
Cevap ne kadar uzun? Sen ... sen ... genellememelisin. Html ile e-posta mesajları göndermeye çalışıyordum, ama ne oldu ... gmail tüm stil etiketleri, tüm harici stil referansları ve tüm komut dosyalarını kaldırır. Yani ... Gmail'e gönderilen e-postaların içindeki fareyle üzerine gelindiğinde görünen bağlantının stilini oluşturmanın bir yolu var mı? Umarım yapar ... umut son ölecek !!! =)
— Miguel Angelo
435

Birden fazla öğeyi değiştirmeniz gerektiğinde son derece verimsiz olmasına rağmen , stillerini onMouseOverve onMouseOutparametrelerinde JavaScript ile değiştirerek aynı etkiyi elde edebilirsiniz :

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

Ayrıca, thisbu bağlamda çalışıp çalışmadığından emin olamıyorum . İle değiştirmeniz gerekebilir document.getElementById('idForLink').

— Alex S
kaynak
12
akıllı! Bir arka plan rengi vurgulu etkisi için de çalışır<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
— mxro
46
Bu 'zeki' olarak görülüyor gülmek zorunda :) Bu etkisi elde edebileceğiniz belirgin / tek yol olduğunda bazı insanların etrafında olmadığını hayal etmek zor. Ya da daha da kötüsü, bir 'görüntü' elde etmek ve sadece 'fareyle üzerine gelme' efekti vermek için görüntüyü değiştirmek zorunda kalmak. Beni yaşlı hissettiriyor! Ama söylemek yeterli, OP sorusuna cevap
— veriyor
5
Bu konuda Manachi ile hemfikirim. Bu 90'ların geocities javascript bir flashback gibi; P
— Eric Castro
9
Eski, yeni, eski veya ileri. Soruyu yanıtladı ve bana yardımcı oldu. Teşekkürler, @peter.
— user2060451
4
Bunu bir e-posta için yapmam gerekiyordu ve işe yaradı. Teşekkür ederim! Bu aslında kabul edilen cevabın aksine soruyu çözer.
— theUtherSide
53

Bunu geçmişte bir noktada yapabilirsiniz . Ama şimdi (aynı standardın en son revizyonuna göre, yani Aday Önerisi) yapamazsınız.

— fuddin
kaynak
3
diğer tüm cevaplar bunun mümkün olmadığını söyledi, ama seninki mümkün olduğunu gösteriyor, cevabın farklı, test ediyorum.
— Amr Elgarhy
2
Maalesef makalenin tarihini kontrol ettim. Onun 10 yaşında. Bu yüzden çalışması gerektiği konusunda bir garanti yoktur. Eğer öyleyse, lütfen bana da söyle.
— fuddin
2
Bunu test ettim: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Ama işe yaramadı
— Amr Elgarhy
5
Bu cevabın herhangi
— biriyle
9
Daha doğru söylemeye olabilir geçmişte bir noktada bunu. Ama şimdi (aynı standardın en son revizyonuna göre, yani Aday Önerisi) yapamazsınız .
— Ilya Streltsyn
34

Ben buna son derece geç katkıda bulunuyorum, ancak kimse bunu önerdi görmek üzücü, aslında satır içi kodu gerekiyorsa, bu yapmak mümkündür. Bazı vurgulu düğmeler için gerekli, yöntem şudur:

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

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
Snippet'i genişlet

Bu durumda satır içi kod: "background-color: red;" fareyle üzerine gelindiğinde anahtar rengi, ihtiyacınız olan rengi oraya koyun ve sonra bu çözüm çalışır. Bunun uyumluluk açısından mükemmel bir çözüm olmayabileceğinin farkındayım, ancak kesinlikle gerekliyse bu işe yarıyor.

— lukesrw
kaynak
4
Teşekkür ederim. Bu harika bir cevap, sanırım bu cevap bir çözüm olmalı.
— Hovhannes Sargsyan
64
Hayır, OP HTML stili özelliğinin içinde satır içi CSS'de olmasını istediklerini söyledi .
— jj_
3
Biliyorum, jj_- ancak bu yöntem CSS'ye sadece birkaç satır koymanıza ve birçok yerde tekrar tekrar kullanmanıza izin verir, birçok kişi (ben dahil) bunu yararlı bir alternatif olarak bulmuştur.
— lukesrw
2
bu, hafif bir değişiklikle gerçek cevap olmalıdır: stildeki renklerden herhangi birini ayarlamayın, sadece üzerine geldiğinde ebeveynden devralma kuralı ve ardından iki rengi satır içi olarak ayarlayın.
— Hayko Koryun
4
Bu, herkesin doğru yol olduğunu söylediği, bunu yapmanın "normal" yoludur. Bununla birlikte, OP orijinal isteği olan satır içi bir yol değildir.
— wcndave
31

Açıkladığınız şeyi tam olarak yapamazsınız, çünkü a:hoverCSS kuralları değil, seçicinin bir parçasıdır. Stil sayfasının iki bileşeni vardır:

selector {rules}

Satır içi stillerin yalnızca kuralları vardır; seçici geçerli öğe olarak örtülüdür.

Seçici, XML benzeri bir belgedeki öğeleri eşleştirmek için bir dizi ölçüt açıklayan etkileyici bir dildir.

Bununla birlikte, yaklaşabilirsiniz, çünkü bir styleset teknik olarak neredeyse her yere gidebilir:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
— Rex M
kaynak
3
Aslında şunları yapamazsınız: “HTML, bir belgenin KAFA bölümünde istediğiniz sayıda STİL öğesine izin verir.” ( w3.org/TR/html4/present/styles.html#edef-STYLE )
— Éric Araujo
2
Makinemde çalışıyor. Teşekkürler!
— Josh Habdas
ÉricAraujo @: Sonra altında bu tüm içeriği sarmak <html> </html>etiketi
— fuddin
30

Javascript kullanarak:

a) Satır içi stil ekleme 

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

b) veya biraz daha zor bir yöntem - "fareyle üzerine gelme" ekleme

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

Not: font-sizeJavascript'teki çok kelimeli stiller (ie ) birlikte yazılır :

element.style.fontSize="12px"

— T.Todua
kaynak
3
Bu cevap düzenlendiği için, şimdi orijinal soru ile tamamen ilgisiz gibi görünüyor ...
— Bill
1
Vay canına, bu kutunun dışında düşünüyor ... Bayıldım!
— theglossy1
14

Bu en iyi kod örneğidir:

<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>
Snippet'i genişlet

Moderatör Önerisi: Endişelerinizi ayırın.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
Snippet'i genişlet

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'
}
Snippet'i genişlet

— user1476842
kaynak
10

Satır içi sahte cam bildirimleri geçerli CSS yinelemesinde desteklenmemektedir (yine de, anladığım kadarıyla gelecekteki bir sürümde gelebilir).

Şimdilik, en iyi bahsiniz muhtemelen stil vermek istediğiniz bağlantının hemen üstünde bir stil bloğu tanımlamaktır:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
— inkedmn
kaynak
4
Bu fikir neyse ki bırakılacak. (Bkz. Lists.w3.org/Archives/Public/www-style/2009Haziran/0341.html , "Terk Edilmiş Çalışma Taslakları" altında.)
— Ms2ger
3
Var . bu cevapta eksik.
— Joel
9

Sivri out olarak, vurgulu için keyfi satır içi stilleri ayarlayamıyor, ancak içinde vurgulu imlecin stilini değiştirebilirsiniz CSS uygun etiketi aşağıdaki kullanarak:

style="cursor: pointer;"
— rutherford
kaynak
2
en iyi cevap olmalı
— Vladislav Guleaev
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

Fareyle üzerine gelme sahte bir sınıftır ve bu nedenle bir stil özniteliğiyle uygulanamaz. Seçicinin bir parçasıdır.

— Joel
kaynak
2
@Derek hala ilgi durumunda / okuyan herkes için: "~ /" (tilde ileri eğik çizgi) asp.net web uygulamalarında uygulama köküne sunucu tarafında bir referanstır. (Uygulama kökü elbette bir alt klasör olabilir). Burada kullanımı doğru olmazdı, bu yüzden soruyu sorduğunuzdan beri cevabın düzenlenmesinin nedeni (şüpheliyim).
— Chris
5

Bunu yapabilirsiniz. Ancak satır içi stillerinde değil. onmouseoverVe onmouseoutetkinlikleri kullanabilirsiniz :

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

4

Yorumlarınıza göre yine de bir JavaScript dosyası gönderiyorsunuz. Fareyle üzerine gelme işlemini JavaScript'te yapın. jQuery 'nin $.hover()yöntemi diğer her JavaScript sarmalayıcıyı yaptığı gibi, bunu kolaylaştırır. Düz JavaScript'te de çok zor değil.

— Vineel Shah
kaynak
Bu bir iş olsa da, benim için çok iyi bir cevap ve satır içi vurgulu yazmak gerçekten mümkün değilse en iyi cevap dikiş
— Amr Elgarhy
4

Bunu yapmanın bir yolu yok. Seçenekleriniz bir JavaScript veya CSS bloğu kullanmaktır.

Belki de tescilli bir stil niteliğini bir stil bloğuna dönüştürecek bazı JavaScript kütüphanesi vardır. Ancak, kod standartlara uygun olmayacaktır.

— m_vitaly
kaynak
2

Sadece farklı bir çözüm buldum.

Benim sorunum: <a>Bazı slaytlar / ana içerik görüntüleyici <a>ve altbilgideki etiketler etrafında bir etiket var . IE'de aynı yere gitmelerini istiyorum, bu yüzden onHoverlink olmasalar bile tüm paragrafın altı çizili olacaktır : bir bütün olarak slayt bir bağlantıdır. IE farkı bilmiyor. Altbilgimde altı çizili ve renk değişikliğine ihtiyaç duyan bazı gerçek bağlantılar da var onHover. Renk değişikliğini yapmak için stilleri altbilgi etiketleriyle satır içine koymak zorunda kalacağımı düşündüm, ancak yukarıdan tavsiye bunun imkansız olduğunu gösteriyor.

Çözüm: Altbilgi bağlantılarına iki farklı sınıf verdim ve sorunum çözüldü. onHoverBir sınıfta renk değişikliği yapabildim , slaytlarda onHoverrenk değişikliği / alt çizgisi yok ve yine de altbilgi ve slaytlarda harici HREFS'ye sahip olabildim!

— Liz
kaynak
1

Gölge ile katılıyorum . JavaScript aracılığıyla CSS'yi değiştirmek için onmouseoverve onmouseoutolayını kullanabilirsiniz .

İnsanların JavaScript'in etkinleştirilmesi gerektiğini söylemeyin. Bu sadece bir stil sorunu, bu yüzden JavaScript olmadan bazı ziyaretçiler olup olmadığı önemli değildir;) Web 2.0'ın çoğu JavaScript ile çalışır. Bkz Facebook veya örneğin (JavaScript sürü) Myspace .

— Jaysn
kaynak
0

Bu, oyunda oldukça geç, ancak ne zaman bir HTML E-postasında JavaScript kullanırsınız? Örneğin, şu anda çalıştığım şirkette (Abodee ile tekerlemeler), çoğu e-posta pazarlama kampanyası için en düşük ortak paydayı kullanıyoruz - ve JavaScript kullanılmıyor. Hiç. Bir tür ön işlemden söz etmiyorsanız.

İlgili bir gönderide belirtildiği gibi: "Lotus Notes, Mozilla Thunderbird, Outlook Express ve Windows Live Mail'in tümü bir tür JavaScript yürütülmesini destekliyor gibi görünüyor. Başka hiçbir şey desteklemiyor."

Bunun alındığı makaleye bağlantı: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Ayrıca, fareyle üzerine gelme mobil cihazlara nasıl çevrilir? Bu yüzden yukarıdaki cevabı beğendim:Long answer: you shouldn't.

Bu konu hakkında daha fazla bilgi sahibi olan biri varsa, lütfen beni düzeltmekten çekinmeyin. Teşekkür ederim.

— Shawn Spencer
kaynak
0

Yani bu kullanıcının aradığı şey değil, ama bu soruyu bir cevap ararken buldum ve ilgili bir şey buldum. İçlerinde bir sekme için yeni bir renk / fareyle üzerine gelmeyi gerektiren bir sürü yinelenen öğem vardı. Çözümümün anahtarı olan gidonları kullanıyorum, ancak diğer şablonlama dilleri de işe yarayabilir.

Bazı renkleri tanımladım ve her eleman için gidon şablonuna geçtim. Şablonun en üstünde bir stil etiketi tanımladım ve özel sınıfımı ve fareyle üzerine gelme rengimi koydum.

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

Sonra şablonu şablonda kullandım:

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

İhtiyacınız olmayabilir !important

— webhound
kaynak
0

çeşitli tipte bir kod yazabilirsiniz

önce bunu yazabilirim

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

başka bir yol deneyebilirsin

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

jquery'de de gezinmeyi deneyebilirsiniz

java betiği

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

Bu kodda, jquery'de üç işleve sahipsiniz, önce jquery'nin temel işlevi olan bir işlevi hazırlarsınız, daha sonra metne bir işaretçi üzerine geldiğinizde bu işlevde bir vurgulu işleviniz olur ve ardından bir sonraki işaretçiyi metne bıraktığınızda farklı renk olur ve bu üçüncü işlevdir

— Siraj Ahmed
kaynak
Lütfen yinelenen cevaplar göndermekten kaçının
— Simas Joneliunas
ok sir simas-joneliunas
— Siraj Ahmed
Bu yaklaşımların hiçbiri soruda ifade edilen sorunu çözmemektedir. JS'yi HTML biçimli bir e-postada hiç kullanamazsınız ve önerdiğiniz diğer yaklaşım, açıkça göz ardı edilen sınıfları kullanır.
— Quentin
-1

Javascript önlemek zorunda kaldı, ancak sunucu tarafı kodu ile gidebiliriz.

bu yüzden bir id oluşturdum, bir stil bloğu oluşturdum, o id ile bağlantı oluşturdum. Evet, geçerli HTML'si.

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>
Snippet'i genişlet

— BananaAcid
kaynak
-2

Sahte sınıfı a:hoveryalnızca harici stil sayfalarında kullanabilirsiniz. Bu nedenle harici bir stil sayfası kullanmanızı öneririm. Kod:

a:hover {color:#FF00FF;}   /* Mouse-over link */
— user1466310
kaynak
Tabii ki harici sayfalara ihtiyacınız yok, sadece styleetiketi kullanın .
— Dmitri Zaitsev
-2

Bir sınıf ekleyerek id yapabilirsiniz, ancak asla satır içi.

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

2 satır ancak sınıfı her yerde yeniden kullanabilirsiniz.

— böcek
kaynak
-3

Benim sorunum, fareyle üzerine gelindiğinde farklı bir görüntü tarafından değiştirilmesi gereken çok sayıda resim-simge kullanan bir web sitesi inşa etmemdi (örneğin, mavi-ish görüntüleri fareyle kırmızı-ish'e dönüşür). Bunun için aşağıdaki çözümü ürettim:

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

Bir çift görüntü içeren bir kap tanıttım. Birincisi görünür, diğeri gizlidir (display: none). Konteyneri gezdirdiğinizde, birincisi gizlenir (ekran: yok) ve ikincisi tekrar görünür (ekran: blok).

— Jochem Geussens
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.