ฉันสามารถปิด CSS: hover effect ผ่าน JavaScript ได้หรือไม่

Question 1

ฉันพยายามป้องกันไม่ให้เบราว์เซอร์ใช้เอ:hoverฟเฟกต์ของ CSS ผ่าน JavaScript

ฉันตั้งค่าaและa:hoverสไตล์ใน CSS ของฉันเพราะฉันต้องการเอฟเฟกต์โฮเวอร์ถ้า JS ไม่พร้อมใช้งาน แต่ถ้า JS เป็นใช้ได้ผมต้องการที่จะเขียนทับผลโฉบ CSS ของฉันกับความนุ่มนวลหนึ่ง (โดยใช้สี jQuery ปลั๊กอินเช่น.)

ฉันลองสิ่งนี้:

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

ฉันลองใช้ด้วยreturn false;แต่มันไม่ได้ผล

นี่คือตัวอย่างของปัญหาของฉัน: http://jsfiddle.net/4rEzz/ ลิงก์ควรจางลงโดยไม่เป็นสีเทา

ดังที่กล่าวไว้โดย fudgey วิธีแก้ปัญหาคือการรีเซ็ตรูปแบบโฮเวอร์โดยใช้.css()แต่ฉันจะต้องเขียนทับทุกคุณสมบัติเดียวที่ระบุใน CSS (ดูที่นี่: http://jsfiddle.net/raPeX/1/ ) ฉันกำลังมองหาวิธีแก้ปัญหาทั่วไป

ไม่มีใครรู้วิธีการทำเช่นนี้?

PS: ฉันไม่ต้องการเขียนทับทุกสไตล์ที่ฉันตั้งไว้สำหรับการวางเมาส์เหนือ

Question 2

ไม่มีวิธีแก้ปัญหาทั่วไปของ JavaScript ที่บริสุทธิ์ฉันกลัว JavaScript ไม่สามารถปิด:hoverสถานะCSS เองได้

คุณสามารถลองใช้วิธีแก้ปัญหาทางเลือกต่อไปนี้ได้ หากคุณไม่สนใจเรื่อง HTML และ CSS ของคุณสักหน่อยคุณจะไม่ต้องรีเซ็ตคุณสมบัติ CSS ทั้งหมดด้วยตนเองผ่าน JavaScript

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

Question 3

ใช้คลาสที่สองที่มีการกำหนดโฮเวอร์เท่านั้น:

HTML

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

CSS

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

ตอนนี้คุณสามารถใช้ Jquery เพื่อลบคลาสได้เช่นหากองค์ประกอบถูกคลิก:

JQUERY

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

หวังว่าคำตอบนี้จะเป็นประโยชน์

Question 4

คุณสามารถจัดการสไตล์ชีทและกฎสไตล์ชีทได้ด้วยตัวเองด้วยจาวาสคริปต์

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

ทำให้แอตทริบิวต์! มีความสำคัญและทำให้คำจำกัดความ CSS สุดท้ายควรแทนที่คำจำกัดความก่อนหน้าใด ๆ เว้นแต่จะมีการกำหนดเป้าหมายไว้เป็นพิเศษ คุณอาจต้องแทรกกฎเพิ่มเติมในกรณีนั้น

Question 5

คล้ายกับคำตอบของ aSeptik แต่วิธีนี้ล่ะ? ตัดโค้ด CSS ที่คุณต้องการปิดใช้งานโดยใช้ JavaScript ใน<noscript>แท็ก ด้วยวิธีนี้หากปิด javaScript ระบบ:hoverจะใช้CSS มิฉะนั้นจะใช้เอฟเฟกต์ JavaScript

ตัวอย่าง:

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

Question 6

ฉันใช้ตัวnot()ดำเนินการ CSS และaddClass()ฟังก์ชันของ jQuery นี่คือตัวอย่างเมื่อคุณคลิกที่รายการจะไม่เลื่อนเมาส์ไปที่รายการอีกต่อไป:

ตัวอย่างเช่น:

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

Question 7

ฉันจะใช้ CSS เพื่อป้องกันไม่ให้: hover event เปลี่ยนรูปลักษณ์ของลิงค์

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

CSS แบบธรรมดานี้หมายความว่าลิงก์จะเป็นสีดำและไม่ขีดเส้นใต้ ฉันไม่สามารถบอกได้จากคำถามว่าการเปลี่ยนแปลงรูปลักษณ์เป็นสิ่งเดียวที่คุณต้องการควบคุมหรือไม่

Question 8

ฉันขอแนะนำให้เปลี่ยน:hoverคุณสมบัติทั้งหมด:activeเมื่อคุณตรวจพบว่าอุปกรณ์รองรับการสัมผัส เพียงเรียกใช้ฟังก์ชันนี้เมื่อคุณทำเช่น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');
          }
        }
      }
    }
  }
}

Question 9

ลองตั้งค่าสีของลิงค์:

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

แก้ไข: หรือดีกว่านั้นให้ใช้ CSS ตามที่ Christopher แนะนำ

Question 10

จริงๆแล้ววิธีอื่นในการแก้ปัญหานี้อาจเป็นการเขียนทับ CSS ด้วยinsertRule.

ช่วยให้สามารถแทรกกฎ CSS ไปยังสไตล์ชีตที่มีอยู่ / ใหม่ได้ ในตัวอย่างที่เป็นรูปธรรมของฉันมันจะมีลักษณะดังนี้:

//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 ปีของฉัน: http://jsfiddle.net/raPeX/21/