Satır içi stil işlevi: CSS'de fareyle üzerine gelin

97

CSS stillerini doğrudan etkiledikleri HTML etiketlerine gömmenin CSS'nin amacının çoğunu bozduğunu biliyorum, ancak bazen aşağıdaki gibi hata ayıklama amaçları için yararlıdır:

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

Şuna benzer bir kural yerleştirmenin sözdizimi nedir:

a:hover {text-decoration: underline;}

bir A etiketinin stil niteliğine mi? Belli ki bu değil ...

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

... çünkü bu sadece üzerine gelme sırasında değil, her zaman geçerli olacaktır.

html css

— Raldi
kaynak

Teorik olarak, fareyle üzerine gelme işlemini dinamik hale getirmeye çalışıyorsanız, mevcut sayfaların window.document.styleSheets listesini kullanarak bir stil sayfasına bir fareyle üzerine gelme kuralı enjekte etmek için javascript kullanabilirsiniz.

— GAgnew

Ayrıca bkz. Stackoverflow.com/questions/5293280/…

— rogerdpack

98

Korkarım bu yapılamaz, sözde sınıf seçiciler sıralı olarak ayarlanamaz, bunu sayfada veya bir stil sayfasında yapmanız gerekir.

Ben bahsetmeliyiz teknik olarak sen gerektiğini bunu yapabilmek CSS spec göre , ancak çoğu tarayıcı bunu desteklemez

Düzenleme: Bununla hızlı bir test yaptım:

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

Ve IE7, IE8 beta 2, Firefox veya Chrome'da çalışmıyor. Başka biri başka herhangi bir tarayıcıda test edebilir mi?

— Glenn Slaven
kaynak

3

Bu, altı yıldır güncellenmeyen çok düşük öncelikli bir CSS 3 çalışma taslağı. Spesifikasyondan: 'W3C Çalışma Taslaklarını referans materyal olarak kullanmak veya "devam eden çalışma" dışında bunlardan alıntı yapmak uygun değildir. '

— Jim

1

Doğru, ancak tarayıcılar bazı CSS3 kurallarını uyguluyor , muhtemelen bu bağlamda yanlış kelime olmalı

— Glenn Slaven,

Tarayıcılar genellikle daha fazla geliştirme durumunda olan CSS özelliklerini uygular, örneğin opaklık CSS Renginden (Son Çağrı) ve Medya Sorguları bir Aday Öneridir.

— Jim

Style = ": hover {}", stil sayfasındaki "a {: hover {}}" ile eşdeğer olmaz mı? Bu açıkça bir sözdizimi hatasıdır.

— Kornel

33

Bu cevap çok uzun zaman önce yayınlandı, o zamandan beri işler değişti ve ilgili W3C spesifikasyonunun mevcut sürümü - CSS Stil Özniteliği Rec. ( w3.org/TR/css-style-attr/#syntax ) - açıkça stil özniteliğinin yalnızca bir CSS bildirim bloğunun içeriğini içerebileceğini söylüyor. Yani artık styleöznitelikli sözde elemanlar eklemek imkansız .

— Ilya Streltsyn

24

Yalnızca hata ayıklıyorsanız, css'yi değiştirmek için javascript kullanabilirsiniz:

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

— Aleksi Yrttiaho
kaynak

1

JSF ile bir çözüm aradım ve bu onu düzeltmeme yardımcı oldu. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'beyaz';"

— kdoteu

17

Basit bir çözüm:

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

Veya

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

16

Hata ayıklama içinse, gezinme için bir css sınıfı eklemeniz yeterlidir (öğelerin birden fazla sınıfa sahip olabileceği için):

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

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

— Rodrick Chapman
kaynak

2

Muhtemelen arzu ettiğiniz efekti elde edeceğiniz en yakın şey budur

— Glenn Slaven

1

Fareyle üzerine gelme ve fareden çıkma davranışlarını kullanarak CSS olmadan gezinme açılır pencereleri oluşturmak isteyen herkes için hızlı bir çözüm oluşturdum.

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
kaynak

0

Bu <p>etiket JavaScript'ten oluşturulmuşsa, başka bir seçeneğiniz vardır: Programlı olarak stil sayfalarını belge başlığına eklemek için JSS'yi kullanın. Destekliyor '&:hover'. https://cssinjs.org/

— Michielbdejong
kaynak

-2

JQuery'nin sözde seçicileri de desteklediğini sanmıyorum , ancak tek bir sayfadaki benzer kontrollerinizin ve etiketlerinin birine, çoğuna veya tümüne olay eklemenin hızlı bir yolunu sağlıyor.

Hepsinden iyisi, olay bağlarını zincirleyebilir ve isterseniz hepsini tek bir komut satırında yapabilirsiniz. Açmak veya kapatmak için tüm HTML'yi manuel olarak düzenlemekten çok daha kolay. Sonra tekrar, aynısını CSS'de de yapabileceğiniz için, size bir şey satın aldığını bilmiyorum (jQuery öğrenmek dışında).

— CMPalmer
kaynak