আমি কি একটি সিএসএস অক্ষম করতে পারি: জাভাস্ক্রিপ্টের মাধ্যমে হোভার এফেক্ট?

Question 1

আমি :hoverজাভাস্ক্রিপ্টের মাধ্যমে ব্রাউজারটিকে CSS এর প্রভাব ব্যবহার থেকে বিরত করার চেষ্টা করছি ।

আমি আমার সিএসএসে স্টাইল aএবং a:hoverস্টাইলগুলি সেট করে রেখেছি, কারণ জেএস উপলব্ধ না হলে আমি একটি হোভার ইফেক্ট চাই। কিন্তু যদি জাতীয় হল পাওয়া যায়, আমি আমার সিএসএস হোভার ইফেক্ট ওপর দিয়েই লিখতে চান একটি বাধামুক্ত এক (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/ । ধূসর না হয়ে লিঙ্কটি কেবল বিবর্ণ হওয়া উচিত।

ফুজির দ্বারা উল্লিখিত হিসাবে, একটি কাজের সমাধান হ'র স্টাইলগুলি ব্যবহার করে পুনরায় সেট করতে হবে .css()তবে আমাকে সিএসএসে উল্লিখিত প্রতিটি একক সম্পত্তি ওভাররাইট করতে হবে (এখানে দেখুন: http://jsfiddle.net/raPeX/1/ )। আমি একটি জেনেরিক সমাধান খুঁজছি

কেউ কি জানেন, এটা কিভাবে করে?

PS: আমি হোভারের জন্য নির্ধারিত প্রতিটি স্টাইলকে ওভাররাইট করতে চাই না।

Question 2

খাঁটি জাভাস্ক্রিপ্ট জেনেরিক সমাধান নেই, আমি ভীত। জাভাস্ক্রিপ্ট :hoverনিজেই সিএসএস স্টেট বন্ধ করতে সক্ষম নয়।

আপনি নীচের বিকল্প workaround চেষ্টা করতে পারেন। আপনি যদি আপনার এইচটিএমএল এবং সিএসএসে সামান্য বিড়ম্বনা করতে কিছু মনে করেন না, তবে জাভাস্ক্রিপ্টের মাধ্যমে প্রতিটি সিএসএস সম্পত্তি ম্যানুয়ালি রিসেট করা আপনাকে বাঁচায়।

এইচটিএমএল

<body class="nojQuery">

সিএসএস

/* 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 */
}

জাভাস্ক্রিপ্ট

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

কেবলমাত্র হোভার নির্ধারিত রয়েছে এমন একটি দ্বিতীয় শ্রেণি ব্যবহার করুন:

এইচটিএমএল

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

সিএসএস

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

ক্লাস অপসারণের জন্য এখন আপনি জিকিউরি ব্যবহার করতে পারেন, উদাহরণস্বরূপ যদি উপাদানটি ক্লিক করা থাকে:

জ্যাকুয়েরি

 $('.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);

বৈশিষ্ট্যগুলি তৈরি করা! গুরুত্বপূর্ণ এবং এটিকে একেবারে শেষ সিএসএস সংজ্ঞা তৈরি করা পূর্ববর্তী কোনও সংজ্ঞা ওভাররাইড করা উচিত, যদি না কেউ নির্দিষ্টভাবে লক্ষ্যযুক্ত হয়। সেক্ষেত্রে আপনাকে আরও নিয়ম সন্নিবেশ করতে হতে পারে।

Question 5

এটি সেপটিকের উত্তরের মতো, তবে এই পদ্ধতির কী হবে? আপনি CSS এ জাভাস্ক্রিপ্ট ব্যবহার করে অক্ষম করতে চান এমন সিএসএস কোডটি মোড়ানো <noscript>। এইভাবে যদি জাভাস্ক্রিপ্ট বন্ধ থাকে, তবে সিএসএস :hoverব্যবহার করা হবে, অন্যথায় জাভাস্ক্রিপ্ট প্রভাব ব্যবহার করা হবে।

উদাহরণ:

<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()সিএসএস অপারেটর এবং jQuery এর addClass()ফাংশন ব্যবহার করেছি। এখানে একটি উদাহরণ রয়েছে, আপনি যখন কোনও তালিকার আইটেমটিতে ক্লিক করেন, এটি আর ঘোরাবে না:

উদাহরণ স্বরূপ:

এইচটিএমএল

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

সিএসএস

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

jQuery

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

Question 7

আমি লিঙ্কটির উপস্থিতি পরিবর্তন করতে: হোভার ইভেন্টটিকে আটকাতে CSS ব্যবহার করব।

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

এই সাধারণ সিএসএসের অর্থ লিঙ্কগুলি সর্বদা কালো এবং আন্ডারলাইন করা হবে না not চেহারার পরিবর্তনটিই আপনি নিয়ন্ত্রণ করতে চান কিনা তা আমি প্রশ্ন থেকে বলতে পারি না।

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

সম্পাদনা: বা আরও ভাল, ক্রিস্টোফারের পরামর্শ অনুসারে সিএসএস ব্যবহার করুন

Question 10

আসলে এটির সমাধানের অন্য একটি উপায় হতে পারে, সিএসএস দিয়ে ওভাররাইট করা insertRule।

এটি বিদ্যমান / নতুন স্টাইলশিটে সিএসএস বিধিগুলি ইনজেক্ট করার ক্ষমতা দেয়। আমার দৃ concrete় উদাহরণে এটি দেখতে এই রকম হবে:

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