CSS: vurgulu efektini JavaScript aracılığıyla devre dışı bırakabilir miyim?

99

Tarayıcının :hoverCSS'nin etkisini JavaScript aracılığıyla kullanmasını engellemeye çalışıyorum .

CSS'mde ave a:hoverstillerini ayarladım , çünkü JS mevcut değilse bir gezinme efekti istiyorum. JS Ama eğer olduğunu mevcuttur, ben ile benim CSS vurgu efekti üzerine yazmak istiyor pürüzsüz bir (örneğin eklentisi jQuery renk kullanarak.)

Bunu denedim:

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

Ben de denedim return false;ama çalışmıyor.

İşte sorunumun bir örneği: http://jsfiddle.net/4rEzz/ . Bağlantı grileşmeden kaybolmalıdır.

Fudgey tarafından belirtildiği gibi, geçici bir çözüm, vurgulu stilleri kullanarak sıfırlamak olabilir, .css()ancak CSS'de belirtilen her bir özelliğin üzerine yazmam gerekir (buraya bakın: http://jsfiddle.net/raPeX/1/ ). Genel bir çözüm arıyorum.

Bunun nasıl yapılacağını bilen var mı?

Not: Fareyle üzerine gelme için belirlediğim her stilin üzerine yazmak istemiyorum.

javascript jquery css

— meo
kaynak

136

Ne yazık ki saf bir JavaScript jenerik çözümü yok. JavaScript, CSS :hoverdurumunu kendi kendine kapatamaz .

Yine de aşağıdaki alternatif çözümü deneyebilirsiniz. HTML ve CSS'nizde biraz uğraşmaktan çekinmiyorsanız, JavaScript aracılığıyla her CSS özelliğini manuel olarak sıfırlamak zorunda kalmazsınız.

HTML

<body class="nojQuery">

CSS

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

JavaScript

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

— Paul D. Waite
kaynak

5

Bu çözümü noscript çözümlerinden daha çok seviyorum çünkü bu, CSS tamamen harici dosyalarda bulunduğunda çalışır ve ayrıca CSS ilk yüklenirse ancak JS daha sonra yüklenmezse sayfa yükleme sırasında da çalışır. Bir şeyleri "aşamalı olarak geliştirmek" için jQuery'yi kullanmak, yüklemeleri tamamlanmadan bir şeyler üzerine tıklarsanız, genellikle iyi çalışmayan sayfalara neden olur. Hızlı bir bağlantıda hızlı bir tarayıcıyla bile bunu çok görüyorum.

— Bay Parlak ve Yeni 安宇

@Bay. Parlak ve Yeni: Katılıyorum, bunu da benim çözümümden daha çok seviyorum! Bunun zarafetini neden daha önce fark etmediğimi bilmiyorum ...

— Josh

3

"Bu çözümü noscript çözümlerinden daha çok seviyorum çünkü bu, CSS tamamen harici dosyalarda bulunduğunda çalışıyor" - <noscript>çözüm de öyle. <link>Etiketleri etiketlerin <noscript>yerine sadece içine koyarsınız <style>. Benim çözümüm, her şeyi birden çok dosya yerine tek bir stil sayfası dosyasında tutmanıza izin veriyor.

— Paul D. Waite

Tam olarak aradığım şey bu değil ama bence bu çözüm en iyi uzlaşma! Hepinize teşekkürler

— meo

aynı stili farklı bir adla kopyalayabilir ve jquery kullanarak o sınıfa sahip tüm öğeleri seçebilir ve sınıfı kaldırıp kopya sınıfıyla değiştirebilirsiniz.

— chepe263

14

Yalnızca fareyle üzerine gelme atanmış ikinci bir sınıf kullanın:

HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

Artık, örneğin öğe tıklanmışsa, sınıfı kaldırmak için Jquery'yi kullanabilirsiniz:

JQUERY

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

Umarım bu cevap yardımcı olur.

— Kai Noack
kaynak

3

artı 1. Ortodoks değildir, ancak sorunu oldukça yüce bir şekilde çözer.

— jim tollan

11

Javascript ile stil sayfalarını ve stil sayfası kurallarını kendiniz değiştirebilirsiniz

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

Nitelikleri önemli hale getirmek ve bunu son CSS tanımı yapmak, daha özel olarak hedeflenmedikçe önceki tanımları geçersiz kılmalıdır. Bu durumda daha fazla kural eklemeniz gerekebilir.

— Stephen P
kaynak

1

Veya tüm noscript kurallarını tek bir stil sayfasına koyabilir ve ardından stil sayfasını javascript'ten devre dışı bırakabilirsiniz.

— Sean Hogan

2

Veya noscript stil sayfanızı <link>bir <noscript>öğenin içine mi koyun ? Bu işe yarar, değil mi?

— Paul D. Waite

1

Veya "rahatsız edici" kuralı silin: developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa

1

IE5 bile yapabilir. Bu yöntem farklı bir şekilde adlandırılır, ancak çalışmalıdır: msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx . Diğer tarayıcıları kontrol etmedim, ancak tüm modern tarayıcıların standardı uyguladığını tahmin ediyorum.

— RoToRa

Firefox'taError: The operation is insecure.

— Alex W

11

Bu, aSeptik'in cevabına benzer, peki ya bu yaklaşım? JavaScript kullanarak devre dışı bırakmak istediğiniz CSS kodunu <noscript>etiketlerde sarın . Bu şekilde, javaScript kapalıysa, CSS:hover kullanılacaktır, aksi takdirde JavaScript efekti kullanılacaktır.

Misal:

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

— Josh
kaynak

4

Kullandığım not()CSS operatörü ve jQuery'nin addClass()fonksiyonunu. İşte bir örnek, bir liste öğesine tıkladığınızda artık fareyle üzerine gelmeyecektir:

Örneğin:

HTML

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

CSS

.vegies li:not(.no-hover):hover { color: blue; }

jQuery

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});

— ColdTuna
kaynak

3

: Hover olayının bağlantının görünümünü değiştirmesini önlemek için CSS kullanırdım.

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

Bu basit CSS, bağlantıların her zaman siyah olacağı ve altı çizili olmayacağı anlamına gelir. Görünüşteki değişikliğin kontrol etmek istediğiniz tek şey olup olmadığını sorudan anlayamıyorum.

— Christopher Altman
kaynak

JS bir istemcide mevcut değilse: hover etkisinin olması iyidir. Ama eğer öyleyse, üzerine yazmam gerek. Css'imde bir: hover sınıfı ayarladım, sadece onu devre dışı bırakmak istiyorum.

— meo

@meo: CSS psuedo sınıflarını devre dışı bırakamazsınız, ancak tüm bağlantı stillerini aynı görünüme / parametrelere sahip olacak şekilde ayarlayarak onu geçersiz kılabilirsiniz. Hem bu cevap hem de cevabım bunu farklı şekillerde yapıyor.

— Mottie

3

Cihazın dokunmayı desteklediğini tespit ettiğinizde tüm :hoverözellikleri değiştirmenizi tavsiye ederim :active. Bunu yaptığınızda sadece bu işlevi çağırın touch().

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}

— Shobhit Sharma
kaynak

Benim için harika çalışıyor. Teşekkürler!

— Çevirme

1

Yalnızca bağlantı rengini ayarlamayı deneyin:

$("ul#mainFilter a").css('color','#000');

Düzenleme: veya daha iyisi, Christopher'ın önerdiği gibi CSS'yi kullanın

— Mottie
kaynak

jsfiddle.net/raPeX Bir örnek yaptım. İşe yarıyor ama bunu yapmak biraz aptalca. her CSS değerini alıp stil olarak eklemem gerekir mi? Daha iyi bir yolu olmalı. Bunu yapmak istemiyorum ama ipucu için +1

— meo

Merhaba Meo, hayır hayır, yukarıdaki kodum belirli bir bağlantıyı hedefliyordu, çünkü istediğini düşündüm. Bunu kastettiğin buysa ayerine kullanarak daha fazla genelleyebilirsin ul#mainFilter a, yoksa sayfadaki her bağlantının farklı bir renk olduğunu mu söylüyorsun?

— Mottie

Size ne demek istediğimi göstermek için demonuzu yorumlarla güncelledim: jsfiddle.net/raPeX/2

— Mottie

zaten anladım teşekkür ederim. Ama sorun şu ki, üzerine geldiğimde sadece renk değişmiyor, bazen arka planı, kenarlığı, bazen de çizgi yüksekliği. Bu yüzden, fareyle üzerine gelmeyi engellemek, her bir gezinme efektinin üzerine yazmak benim için daha kolay olurdu.

— meo

Bu fikir için kısmi yama: Css için a.jsOverride:hovertüm css özelliklerini geçersiz kılan bir kural oluşturabilirsiniz , böylece js sadece jsOverridesayfa yüklendiğinde bu sınıfı tüm bağlantılara eklemek zorunda kalır ...

— grossvogel

1

Aslında bunu çözmenin başka bir yolu da CSS'nin üzerine yazmak olabilir insertRule.

Mevcut / yeni bir stil sayfasına CSS kuralları ekleme yeteneği verir. Somut örneğimde şöyle görünecektir:

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

4 yıllık orijinal örneğimle demo: http://jsfiddle.net/raPeX/21/

— meo
kaynak