javascript - সিএসএস ছদ্ম-উপাদানের নির্বাচন এবং ম্যানিপুলিউটিং যেমন::: আগে এবং:: jQuery ব্যবহার করার পরে




css jquery-selectors (14)

সিএসএস ছদ্ম-উপাদানের সিলেক্ট করতে / ব্যবহার করতে কোন উপায় আছে যেমন: ::before এবং ::after jQuery (এবং একটি আধা-কোলন সহ পুরানো সংস্করণ) ব্যবহার করে?

উদাহরণস্বরূপ, আমার স্টাইলশীটটিতে নিম্নলিখিত নিয়ম রয়েছে:

.span::after{ content:'foo' }

কিভাবে আমি jQuery ব্যবহার করে 'foo' থেকে 'bar' পরিবর্তন করতে পারি?


অ্যাক্সেস করার উপায় এখানে: পরে এবং: শৈলী বৈশিষ্ট্যগুলির আগে, CSS এ সংজ্ঞায়িত করা হয়েছে:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

আপনি jQuery এ ছদ্ম উপাদানগুলি নির্বাচন করতে পারবেন না কারণ এটি DOM এর অংশ নয়। কিন্তু আপনি পিতার উপাদানতে একটি নির্দিষ্ট শ্রেণী যোগ করতে এবং CSS এ তার ছদ্মবেশী উপাদানগুলি নিয়ন্ত্রণ করতে পারেন।

EXAMPLE

JQuery এ:

<script type="text/javascript">
    $('span').addClass('change');
</script>

সিএসএস:

span.change:after { content: 'bar' }

আপনি একটি জাল সম্পত্তি তৈরি করতে বা বিদ্যমান একটি ব্যবহার করতে পারেন এবং ছদ্ম-উপাদান এর স্টাইলশীট এ এটি উত্তরাধিকারী

var switched = false;

// Enable color switching
setInterval(function () {
    var color = switched ? 'red' : 'darkred';
    var element = document.getElementById('arrow');
    element.style.backgroundColor = color;
    
    // Managing pseudo-element's css
    // using inheritance.
    element.style.borderLeftColor = color;
    
    switched = !switched;
}, 1000);
.arrow {
    /* SET FICTIONAL PROPERTY */
    border-left-color:red;
    
    background-color:red;
    width:1em;
    height:1em;
    display:inline-block;
    position:relative;
}
.arrow:after {
    border-top:1em solid transparent;
    border-right:1em solid transparent;
    border-bottom:1em solid transparent;
    border-left:1em solid transparent;
    
    /* INHERIT PROPERTY */
    border-left-color:inherit;
    
    content:"";
    width:0;
    height:0;
    position:absolute;
    left:100%;
    top:-50%;
}
<span id="arrow" class="arrow"></span>

মনে হচ্ছে এটি "সামগ্রী" সম্পত্তিটির জন্য কাজ করে না :(


আপনি জাভাস্ক্রিপ্ট করতে পারেন যে অন্য কিছু, উত্তর দিতে এটি একটি সহজ প্রশ্ন মনে হবে। দুর্ভাগ্যবশত, একটি প্রযুক্তিগত সমস্যাতে সমস্যাটি আসে: CSS: পরে এবং: নিয়মগুলি DOM এর অংশ নয় এবং অতএব jQuery এর DOM পদ্ধতি ব্যবহার করে পরিবর্তন করা যাবে না।

জাভাস্ক্রিপ্ট এবং / অথবা সিএসএস কার্যকারিতা ব্যবহার করে এই উপাদানের ম্যানিপুলেশন করার উপায় আছে; আপনি যা এক ব্যবহার আপনার সঠিক প্রয়োজনীয়তা উপর নির্ভর করে।

আমি সবচেয়ে ভাল "সর্বোত্তম" পদ্ধতি হিসাবে বিবেচিত যা দিয়ে শুরু করতে যাচ্ছি:

1) একটি পূর্বনির্ধারিত ক্লাস যুক্ত করুন / অপসারণ করুন

এই পদ্ধতিতে, আপনি ইতিমধ্যে আপনার CSS এ একটি শ্রেণি তৈরি করেছেন ভিন্নভাবে :after বা :before স্টাইলের :before । এটি আপনার স্টাইলশীটের পরে এই "নতুন" বর্গটিকে ওভাররাইড করে নিশ্চিত করতে রাখুন:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

তারপরে আপনি সহজেই jQuery (অথবা ভ্যানিলা জাভাস্ক্রিপ্ট) ব্যবহার করে এই ক্লাসটি যোগ করতে বা অপসারণ করতে পারেন:

$('p').on('click', function() {
    $(this).toggleClass('special');
});

    $('p').on('click', function() {
      $(this).toggleClass('special');
    });
p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
p.special:before {
  content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

  • পেশাদার: jQuery সঙ্গে বাস্তবায়ন সহজ; দ্রুত একবার একাধিক শৈলী পরিবর্তন করে; উদ্বেগ বিচ্ছেদ বাধ্য করে (আপনার এইচটিএমএল থেকে আপনার সিএসএস এবং জেএস বিচ্ছিন্ন)
  • কনস: CSS অবশ্যই প্রাক-লিখিত হতে হবে, তাই এর বিষয়বস্তু :before বা :after সম্পূর্ণ গতিশীল নয়

2) ডকুমেন্ট স্টাইলশীট সরাসরি নতুন শৈলী যোগ করুন

ডকুমেন্ট স্টাইলশীটে সরাসরি শৈলী যোগ করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব, এর মধ্যে রয়েছে :after এবং :before শৈলীগুলির :before । jQuery একটি সুবিধাজনক শর্টকাট সরবরাহ করে না, কিন্তু ভাগ্যক্রমে JS জটিল নয়:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
  content: "foo";
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

.addRule() এবং সম্পর্কিত .insertRule() পদ্ধতিগুলি মোটামুটি ভালভাবে সমর্থিত আজ।

একটি বৈচিত্র্য হিসাবে, আপনি ডকুমেন্টে সম্পূর্ণভাবে নতুন স্টাইলশীট যোগ করতে jQuery ব্যবহার করতে পারেন, তবে প্রয়োজনীয় কোডটি কোন ক্লিনার নয়:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
  content: "foo";
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

যদি আমরা মানগুলি "ম্যানিপুলেটিং" নিয়ে কথা বলি, শুধু তাদের যোগ না করে, আমরা বিদ্যমান পঠনটি পড়তে পারি :after বা :before ভিন্ন পদ্ধতি ব্যবহার করে শৈলীগুলির :before :

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
    content:"foo";
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

সামান্য ছোট কোডের জন্য আমরা jQuery ব্যবহার করার সময় $('p')[0] দিয়ে document.querySelector('p') প্রতিস্থাপন করতে পারি।

  • পেশাদার: কোন স্ট্রিং স্টাইল মধ্যে গতিশীলভাবে ঢোকানো যাবে
  • কনস: মূল শৈলীগুলি পরিবর্তিত হয় না, কেবল ওভাররাইড করা হয়; পুনরাবৃত্তি (ab) ব্যবহার DOM ইচ্ছাকৃতভাবে বড় হতে পারে

3) একটি ভিন্ন DOM বৈশিষ্ট্য পরিবর্তন করুন

আপনি একটি নির্দিষ্ট DOM বৈশিষ্ট্যটি পড়তে আপনার CSS এ attr() ব্যবহার করতে পারেন । ( যদি একটি ব্রাউজার সমর্থন করে :before , এটি attr() পাশাপাশি এটি সমর্থন করে। ) content: সহ এটি সংযোজন করে content: কিছু সাবধানে-প্রস্তুত CSS এ, আমরা সামগ্রীটি পরিবর্তন করতে পারি (কিন্তু অন্যান্য বৈশিষ্ট্য যেমন মার্জিন বা রঙের) :before এবং :after গতিশীলভাবে :after :

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

জাতীয়:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});
p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

সিএসএস সময়ের আগে প্রস্তুত না হলে এটি দ্বিতীয় প্রযুক্তি দিয়ে মিলিত হতে পারে:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() {
  $(this).attr('data-before', str);
});
p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

  • পেশাদার: অবিরাম অতিরিক্ত শৈলী তৈরি করে না
  • কনস: সিএসএস attr শুধুমাত্র স্ট্রিংগুলিতে প্রয়োগ করতে পারে, ইউআরএল বা আরজিবি রং নয়

আমরা ছদ্ম-উপাদানটি ম্যানিপুলেট করার জন্য CSS কাস্টম বৈশিষ্ট্য (ভেরিয়েবল) উপর নির্ভর করতে পারি। আমরা specification যে পড়তে পারেন যে:

কাস্টম বৈশিষ্ট্যগুলি সাধারণ বৈশিষ্ট্য, তাই তারা কোনও উপাদানতে ঘোষণা করা যেতে পারে, স্বাভাবিক উত্তরাধিকার এবং ক্যাসকেড নিয়মগুলির সাথে সমাধান করা হয়, @media এবং অন্যান্য শর্তাধীন নিয়মগুলির সাথে শর্তাধীন করা যেতে পারে, HTML এর শৈলী বৈশিষ্ট্যতে ব্যবহার করা যেতে পারে, এটি পড়তে বা সেট করা যেতে পারে CSSOM , ইত্যাদি ব্যবহার করে

এই বিবেচনায়, ধারণাটি উপাদানটির মধ্যে কাস্টম সম্পত্তি সংজ্ঞায়িত করা এবং ছদ্ম-উপাদানটি কেবল এটির উত্তরাধিকারী হবে; এইভাবে আমরা সহজেই এটি পরিবর্তন করতে পারেন।

দয়া করে নোট করুন যে CSS ব্রাউজারগুলি প্রাসঙ্গিক সমস্ত বিবেচনাযোগ্য ব্রাউজারে উপলব্ধ থাকতে পারে না (যেমন IE 11): https://caniuse.com/#feat=css-variables

1) ইনলাইন শৈলী ব্যবহার করে :

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<div class="box"></div>
<div class="box" style="--color:blue"></div>
<div class="box" style="--color:black"></div>
<div class="box" style="--color:#f0f"></div>

2) সিএসএস এবং ক্লাস ব্যবহার করে

.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}

.blue {
  --color:blue;
}
.black {
  --color:black;
}
<div class="box"></div>
<div class="box black" ></div>
<div class="box blue"></div>

3) জাভাস্ক্রিপ্ট ব্যবহার করে

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");
document.querySelectorAll('.box')[1].style.setProperty("--color", "#f0f");
.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

4) jQuery ব্যবহার করে

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
   with older version we can use style attribute to set the value. Simply pay
   attention if you already have inline style defined! 
*/
$('.box').eq(1).attr("style","--color:#f0f");
.box:before {
  content:"I am a before element";
  color:var(--color, red);
  font-size:25px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

এটি জটিল মানের সাথেও ব্যবহার করা যেতে পারে:

.box {
  --c:"content";
  --b:linear-gradient(red,blue);
  --s:20px;
  --p:0 15px;
}

.box:before {
  content: var(--c);
  background:var(--b);
  color:#fff;
  font-size: calc(2 * var(--s) + 5px);
  padding:var(--p);
}
<div class="box"></div>


আমি সবসময় আমার নিজস্ব ইউটিলিটি ফাংশন যোগ করছি, যা এই মত দেখায়।

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

অথবা ES6 বৈশিষ্ট্য ব্যবহার করুন:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

এখানে অনেক উত্তর আছে তবে কোনও উত্তর CSS এর ম্যানিপুলেশন করতে সহায়তা করে না :before বা :after এমনকি গ্রহণযোগ্য নয়।

আমি এটা করতে প্রস্তাব কিভাবে এখানে। আপনার এইচটিএমএল এই মত মনে করেন:

<div id="something">Test</div>

এবং তারপর আপনি এটি সেট করছেন: CSS এর আগে এবং এটির মতো ডিজাইন করা:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

অনুগ্রহ করে লক্ষ্য করুন যে আমি উপাদানটির উপাদান সংযোজনও সেট করি যাতে আপনি এটি পরে সহজেই গ্রহণ করতে পারেন। এখন একটি button ক্লিক করা আছে, আপনি এর রঙ পরিবর্তন করতে চান: আগে সবুজ এবং এর ফন্ট সাইজ 30px। আপনি নিম্নরূপ যে অর্জন করতে পারেন:

কিছু ক্লাসে আপনার প্রয়োজনীয় শৈলী দিয়ে একটি CSS সংজ্ঞায়িত করুন। .activeS :

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

এখন আপনি পরিবর্তন করতে পারেন: স্টাইলের আগে আপনার ক্লাস যোগ করে: উপাদান হিসাবে আগে নিম্নরূপ:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

আপনি যদি কেবল বিষয়বস্তু পেতে চান :before , এটি এইভাবে করা যেতে পারে:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

অবশেষে যদি আপনি গতিশীলভাবে পরিবর্তন করতে চান :before jQuery দ্বারা সামগ্রী :before , আপনি নিম্নরূপ যে অর্জন করতে পারেন:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

উপরের "পরিবর্তনের :before " বোতামে ক্লিক করা হবে :before '22' যা একটি গতিশীল মান।

আমি আসা করি এটা সাহায্য করবে


এখানে এইচটিএমএল হয়:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

'আগে' কম্পিউটেড স্টাইলটি content: "VERIFY TO WATCH"; ছিল content: "VERIFY TO WATCH";

এখানে jQuery এর আমার দুটি লাইন রয়েছে, যা বিশেষভাবে এই উপাদানটিকে রেফারেন্স করার জন্য অতিরিক্ত শ্রেণী যোগ করার ধারণাটি ব্যবহার করে এবং তারপর সুড-উপাদান এর সামগ্রী মান CSS এর পরিবর্তন করতে একটি শৈলী ট্যাগ (একটি গুরুত্বপূর্ণ ট্যাগ সহ) যোগ করে:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");


কেন আপনি কেবল একটি style যোগ করতে পারেন যখন ক্লাস বা গুণাবলী যোগ করা

$('head').append('<style>.span:after{ content:'changed content' }</style>')

খৃস্টান পরামর্শ কি লাইন, আপনি কি করতে পারে:

$('head').append("<style>.span::after{ content:'bar' }</style>");

যদিও তারা সিএসএসের মাধ্যমে ব্রাউজার দ্বারা রুপান্তরিত হয় যেমন তারা অন্য আসল DOM উপাদানগুলির মতো ছিল, তবে ছদ্ম-উপাদানগুলি নিজেই ডোমের অংশ নয়, কারণ ছদ্ম-উপাদানগুলি যেমন নামটি বোঝায়, তা বাস্তব উপাদান নয়, এবং তাই আপনি নির্বাচন করুন এবং jQuery এর সাথে সরাসরি ম্যানিপুলেশন করুন (বা যে বিষয়টি জন্য কোনও জাভাস্ক্রিপ্ট এপিআই, সিলেকশন এপিআই এমনকি নয়)। এটি কোন ছদ্ম-উপাদানের ক্ষেত্রে প্রযোজ্য যার শৈলীগুলি আপনি একটি স্ক্রিপ্টের সাথে সংশোধন করার চেষ্টা করছেন, এবং কেবল ::before এবং ::after

আপনি কেবলমাত্র সিএসএমওএম ( window.getComputedStyle() ভিটকামপয়েন্টেড স্টাইল ( window.getComputedStyle() মনে করে runtime এ ছদ্ম-উপাদান শৈলীগুলি অ্যাক্সেস করতে পারেন, যা jQuery দ্বারা .css() বাইরে প্রকাশ করা হয় না, এমন একটি পদ্ধতি যা ছদ্ম-উপাদানের সমর্থন করে না।

আপনি সর্বদা এটি প্রায় অন্যান্য উপায় খুঁজে পেতে পারেন, যদিও, উদাহরণস্বরূপ:

  • এক বা একাধিক ইচ্ছাকৃত ক্লাসের ছদ্ম-উপাদানের ক্ষেত্রে শৈলী প্রয়োগ করা, তারপরে ক্লাসগুলির মধ্যে টগল করা (দ্রুত উদাহরণের জন্য সিউক্লিয়েগার উত্তর দেখুন) - এটি নির্বোধ উপায় যা সহজ নির্বাচকদের (যা ছদ্ম-উপাদানের নয়) ব্যবহার করে। উপাদান এবং উপাদান রাজ্যের মধ্যে পার্থক্য, উপায় তারা ব্যবহার করা হয় উদ্দেশ্যে

  • ডকুমেন্ট স্টাইলশীট পরিবর্তন করে ছদ্ম-উপাদানগুলিকে প্রয়োগ করা শৈলীগুলি ম্যানিপুলিয়েটিং, যা হ্যাকের আরো অনেক কিছু


সবাইকে ধন্যবাদ! আমি যা চেয়েছি তা করতে http://jsfiddle.net/Tfc9j/42/ : ডি http://jsfiddle.net/Tfc9j/42/ এখানে একটি বর্ণন নিন

আমি বাইরের ডিভিটির অস্বচ্ছতা অভ্যন্তরীণ div এর অস্পষ্টতা থেকে ভিন্ন এবং অন্য কোথাও একটি ক্লিকের সাথে পরিবর্তন হতে চেয়েছিলেন;) ধন্যবাদ!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}


<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   


</div>

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

<style id="pseudo"></style>

তারপর জাভাস্ক্রিপ্ট এই মত চেহারা হবে:

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

এখন আমার ক্ষেত্রে আমি অন্যটির উচ্চতার উপর ভিত্তি করে একটি পূর্বের উপাদানটির উচ্চতা সেট করতে এটি প্রয়োজন এবং এটি পুনরায় আকারে পরিবর্তিত হবে তাই এটি ব্যবহার setHeight()করে আমি উইন্ডোটি পুনরায় আকারে প্রতিবার চালাতে পারি এবং এটি <style>সঠিকভাবে প্রতিস্থাপন করবে ।

একই জিনিস করতে চেষ্টা আটকে ছিল যে কেউ সাহায্য করে।


আমি ছদ্ম-উপাদানটি (যা একই প্রযোজ্য ) সংশোধন করতে :rootভেতরে সংজ্ঞায়িত ভেরিয়েবলগুলির ব্যবহার করে , বিশেষ করে স্টাইলযুক্ত সংজ্ঞার জন্য মান পরিবর্তন করতে এবং নিম্নোক্ত demo মান ( ) -এর জন্য মান পরিবর্তন করে যা জাভাস্ক্রিপ্ট ব্যবহার করে এলোমেলো রং তৈরি করে। / JQuery:CSS:after:beforebackground-coloranchor.sliding-middle-out:hover:aftercontentanchor#referencedemo

এইচটিএমএল

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
  <a href="https://.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title=" topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

সিএসএস

:root {
    --anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: var(--anchorsFg);
    outline: 0;
    font-style: italic;

    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -ms-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background-color: transparent;

    -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background-color: var(--anchorsFg);
    outline: 0;
}
#reference {
  margin-top: 20px;
}
.sliding-middle-out:before {
  content: attr(data-content);
  display: attr(data-display);
}

জাতীয় / jQuery এর

var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
    $( ":root" ).css({"--anchorsFg" : anchorsFg});
});

$( "#reference" ).hover(
 function(){
    $(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
 },
 function(){
    $(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
 }
);




pseudo-element