পরিবর্তন: জাভাস্ক্রিপ্ট সহ CSS বৈশিষ্ট্যগুলি হোভার করুন h

Question 1

সিএসএস পরিবর্তন করার জন্য আমার একটি উপায় খুঁজতে হবে: জাভাস্ক্রিপ্ট ব্যবহার করে বৈশিষ্ট্যগুলি হোভার করুন।

উদাহরণস্বরূপ, ধরুন আমার এই HTML কোডটি রয়েছে:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

এবং নিম্নলিখিত সিএসএস কোড:

table td:hover {
background:#ff0000;
}

আমি জাভাস্ক্রিপ্ট ব্যবহার করতে চাই <<> হোভার বৈশিষ্ট্যগুলি, বলুন, ব্যাকগ্রাউন্ডে পরিবর্তন করুন: # 00ff00। আমি জাভাস্ক্রিপ্ট ব্যবহার করে শৈলীর পটভূমি সম্পত্তি অ্যাক্সেস করতে পারে জানি:

document.getElementsByTagName("td").style.background="#00ff00";

তবে আমি জাভাস্ক্রিপ্টের সমতুল্য: হোভার সম্পর্কে জানি না। আমি কীভাবে এই <td> এর: জাভাস্ক্রিপ্ট ব্যবহার করে ব্যাকগ্রাউন্ডটি পরিবর্তন করব?

আপনার সাহায্য ব্যাপকভাবে প্রশংসা করা হয়!

Question 2

সিউডো ক্লাসগুলি :hoverকখনও কোনও উপাদানকে উল্লেখ করে না, তবে স্টাইলশিট বিধির শর্ত পূরণ করে এমন কোনও উপাদানকে বোঝায়। আপনাকে স্টাইলশীট নিয়ম সম্পাদনা করতে হবে , একটি নতুন নিয়ম সংযোজন করতে হবে , বা একটি নতুন স্টাইলশিট যুক্ত করতে হবে যাতে নতুন :hoverনিয়ম অন্তর্ভুক্ত রয়েছে ।

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

Question 3

আপনি জাভাস্ক্রিপ্টের মাধ্যমে প্রকৃত নির্বাচকটিকে পরিবর্তন বা পরিবর্তন করতে পারবেন না:hover । তবে, mouseenterআপনি শৈলী পরিবর্তন করতে এবং আবার ফিরে যেতে পারেন mouseleave(ধন্যবাদ, @ ব্রায়ান)।

Question 4

আপনি যা করতে পারেন তা হ'ল আপনার অবজেক্টের ক্লাস পরিবর্তন করা এবং বিভিন্ন হোভারের বৈশিষ্ট্য সহ দুটি শ্রেণি সংজ্ঞায়িত করা। উদাহরণ স্বরূপ:

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

এবং এটিতে আমি এটি পেয়েছি: জাভাস্ক্রিপ্ট সহ কোনও উপাদানটির শ্রেণি পরিবর্তন করুন

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");

Question 5

যদি এটি আপনার উদ্দেশ্য অনুসারে ফিট করে তবে আপনি CSS ব্যবহার না করে onmouseoverএবং জাভাস্ক্রিপ্টে ইভেন্টটি ব্যবহার না করেই হোভার কার্যকারিতা যুক্ত করতে পারেন

এখানে একটি কোড স্নিপেট

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>

Question 6

এই পৃষ্ঠাটি 7 বছর অনেক দেরীতে খুঁজে পেয়ে দুঃখিত, তবে এই সমস্যাটি সমাধান করার জন্য এখানে একটি খুব সহজ উপায় (যথেচ্ছভাবে হোভার শৈলীর পরিবর্তন):

এইচটিএমএল:

<button id=Button>Button Title</button>

সিএসএস:

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

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

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');

Question 7

খুব পুরানো প্রশ্ন তাই আমি বুঝতে পেরেছি আমি আরও আধুনিক উত্তর যুক্ত করব। এখন যে সিএসএস ভেরিয়েবলগুলি ব্যাপকভাবে সমর্থিত সেগুলি জেএস ইভেন্টগুলির প্রয়োজন ছাড়াই এটি অর্জন করতে ব্যবহার করা যেতে পারে বা!important ।

ওপির উদাহরণ গ্রহণ করা:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

আমরা এখন সিএসএসে এটি করতে পারি:

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

এবং জাভাস্ক্রিপ্ট এর মতো ব্যবহার করে হোভারের রাজ্য যুক্ত করুন:

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

এখানে একটি কার্যকারী উদাহরণ https://codepen.io/ybentz/pen/RwPoeqb

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

আমার একবার এই প্রয়োজন ছিল এবং এর জন্য একটি ছোট লাইব্রেরি তৈরি করেছিলাম, যা সিএসএস ডকুমেন্টগুলি বজায় রাখে

https://github.com/terotests/css

এটি দিয়ে আপনি রাষ্ট্র করতে পারেন

css().bind("TD:hover", {
        "background" : "00ff00"
    });

এটি উপরে উল্লিখিত কৌশলগুলি ব্যবহার করে এবং ক্রস ব্রাউজার সংক্রান্ত সমস্যাগুলি যত্ন নেওয়ার চেষ্টা করে। যদি কোনও কারণে IE9 এর মতো কোনও পুরানো ব্রাউজার উপস্থিত থাকে তবে এটি স্টাইল ট্যাগগুলির সংখ্যা সীমাবদ্ধ করে দেবে, কারণ পৃষ্ঠায় প্রাপ্ত স্টাইল ট্যাগগুলির সংখ্যার জন্য পুরানো IE ব্রাউজারটির এই অদ্ভুত সীমা ছিল।

এছাড়াও, এটি পর্যায়ক্রমে ট্যাগগুলি আপডেট করে ট্যাগগুলিতে সীমাবদ্ধ করে। অ্যানিমেশন ক্লাস তৈরির জন্যও সীমিত সমর্থন রয়েছে।

Question 10

একটি বৈশ্বিক বর্ণ ঘোষণা করুন:

var td

তারপরে আপনার গিয়ানা শূকরটি <td>এটি দ্বারা নির্বাচন করুন id, আপনি যদি সেগুলির পরে সমস্ত পরিবর্তন করতে চান

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

একটি ফাংশন আলোড়ন সৃষ্টি করা এবং একটি লুপ আপনার পছন্দসই সব পরিবর্তন করুন td'র

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

আপনার সিএসএস শীটে যান:

.yournewclass:hover { background-color: #00ff00; }

এবং যে এটি, এই দিয়ে আপনি আপনার সব করতে সক্ষম <td>ট্যাগ একটি পেতে background-color: #00ff00;যখন তার CSS সম্পত্তি সরাসরি পরিবর্তন করে hovered (CSS শ্রেণীর মধ্যে সুইচিং)।

Question 11

এটি আসলে ঘরে সিএসএস যোগ করছে না, তবে একই প্রভাব দেয়। উপরের অন্যদের মতো একই ফলাফল সরবরাহ করার সময়, এই সংস্করণটি আমার কাছে কিছুটা স্বজ্ঞাত, তবে আমি একজন শিক্ষানবিস, সুতরাং এটির জন্য এটি গ্রহণ করুন:

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

এটির জন্য আপনি "হোভারসেল" তে হাইলাইট করতে চান এমন প্রতিটি কক্ষের জন্য শ্রেণি নির্ধারণ করা দরকার।

Question 12

আপনি একটি সিএসএস পরিবর্তনশীল করতে পারেন এবং তারপরে এটি জেএসে পরিবর্তন করতে পারেন।

:root {
  --variableName: (variableValue);
}

এটিকে জেএসে পরিবর্তন করতে, আমি এই সামান্য কাজগুলি করেছি:

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

এবং

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

আপনি যতটা চান সিএসএস ভেরিয়েবল তৈরি করতে পারেন এবং ফাংশনগুলিতে আমি কোনও বাগ খুঁজে পাইনি; এর পরে, আপনাকে যা করতে হবে তা হ'ল এটি আপনার সিএসএসে এম্বেড করা উচিত:

table td:hover {
  background: var(--variableName);
}

এবং তারপর বাম, এমন একটি সমাধান যা কেবলমাত্র কিছু সিএসএস এবং 2 জেএস ফাংশন প্রয়োজন!

Question 13

হোভারের মতো নিয়ন্ত্রণ করতে আপনি মাউস ইভেন্টগুলি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি যখন এই উপাদানটি হোভার করেন তখন নীচের কোডটি দৃশ্যমান করে তোলে।

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

Question 14

আপনি যদি লাইটওয়েট এইচটিএমএল ইউএক্স ল্যাং ব্যবহার করেন তবে এখানে একটি উদাহরণ দেখুন , লিখুন:

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

উপরের কোডটি সিএসএস সম্পাদন করে: মেটাটাগ হোভার করে।