কীভাবে লিখবেন: ইনলাইন সিএসএসে হোভার করবেন?


1015

আমার একটি কেস রয়েছে যেখানে আমাকে অবশ্যই ইনলাইন সিএসএস কোড লিখতে হবে এবং আমি একটি অ্যাঙ্কারে হোভার স্টাইল প্রয়োগ করতে চাই।

a:hoverএইচটিএমএল স্টাইল বৈশিষ্ট্যের মধ্যে আমি কীভাবে ইনলাইন সিএসএস ব্যবহার করতে পারি ?

যেমন আপনি এইচটিএমএল ইমেলগুলিতে নির্ভরযোগ্যভাবে CSS ক্লাস ব্যবহার করতে পারবেন না।


24
এইচটিএমএলকে ব্লগিং অ্যাপ্লিকেশনগুলিতে এম্বেড করার জন্য প্রায়শই ইনলাইন শৈলীর একচেটিয়া ব্যবহারের প্রয়োজন হয়। বিশেষত যদি আপনি কোনও তৃতীয় পক্ষের ক্লায়েন্টের মাধ্যমে এইচটিএমএল এম্বেড করছেন এবং ব্যবহারকারীর থিমগুলিতে অ্যাক্সেস না পেয়ে থাকেন।
প্রভিডেন্স

8
এর জন্য প্রস্তাবিত সিএসএস স্ট্যান্ডার্ড রয়েছে; এটি কী ধরণের ব্রাউজারের সহায়তা থাকতে পারে তা ধারণা নেই (ইঙ্গিত: তারা-মোজ ইত্যাদির মতো কাস্টম ট্যাগগুলি ব্যবহার করতে পারে): w3.org/TR/2002/WD-css-style-attr-20020515
কাটো


17
উহু চলো. কখনও কখনও আপনি কেবল একটি ল্যান্ডিং পৃষ্ঠার প্রোটোটাইপ তৈরি করে চলেছেন এবং আপনাকে স্টাইলশীটগুলি কাঁটাচামচ করতে বা কোনও নতুন টেম্পলেট শাখা তৈরি করতে বা সবুজ বোতামটি আরও ভাল কাজ করে কিনা তা যাচাই করতে চান না। Sheesh।
এলবেল

1
এই পৃষ্ঠাটি 13 বছর পুরানো, খসড়াটি পরিত্যাগ করা হয়েছে।
তোফানডেল

উত্তর:


574

সংক্ষিপ্ত উত্তর: আপনি পারবেন না।

দীর্ঘ উত্তর: আপনার উচিত হবে না।

এটি একটি শ্রেণীর নাম বা একটি আইডি দিন এবং শৈলী প্রয়োগ করতে স্টাইলশিট ব্যবহার করুন।

:hoverসিউডো-সিলেক্টর এবং সিএসএসের জন্য কেবল স্টাইল শিটের মধ্যে অর্থ রয়েছে। কোনও ইনলাইন-শৈলীর সমতুল্য নেই (কারণ এটি নির্বাচনের মানদণ্ডকে সংজ্ঞায়িত করে না)।

ওপির মন্তব্যের প্রতিক্রিয়া:

গতিশীলভাবে সিএসএস বিধি যুক্ত করার জন্য একটি ভাল স্ক্রিপ্টের জন্য জাভাস্ক্রিপ্টের সাথে টোটলি পিডএনএন সিএসএস দেখুন । আরো দেখুন পরিবর্তন শৈলী পত্রক বিষয়ে তত্ত্ব কিছু।

এছাড়াও, ভুলে যাবেন না, আপনি যদি বাহ্যিক স্টাইলশিটগুলিতে লিঙ্ক যুক্ত করতে পারেন তবে এটি বিকল্প। উদাহরণ স্বরূপ,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

সাবধানতা: উপরের অংশে একটি প্রধান বিভাগ রয়েছে বলে ধরে নেওয়া হয়েছে ।


4
আপনি জাভাস্ক্রিপ্টে CSS ক্লাস যুক্ত করতে পারেন
জোনাথন ফিংল্যান্ড

203
অন্যান্য পরিস্থিতিতে রয়েছে যেখানে ইনলাইন সিএসএসই একমাত্র বিকল্প - যেমন এইচটিএমএল ইমেলগুলি (যেমন: জিমেইল সিএসএসটি ইনলাইন না করা থাকলে তা উপেক্ষা করে)। দুর্ভাগ্যক্রমে জাভাস্ক্রিপ্ট বেশিরভাগ ইমেল ক্লায়েন্টগুলিতে ছিনিয়ে নেওয়া হয়েছে পাশাপাশি আমি এখনও যোগ করার কোনও উপায় খুঁজে পাই নি: হোভার ইফেক্টগুলি।
সাইমন ইস্ট

24
ক্যাটো যখন এটি একটি দুর্দান্ত লিঙ্ক, এবং আমি সত্যিই কামনা করি এটি কাজ করে, দুঃখের বিষয় এটি না হয়। কেবলমাত্র নিশ্চিত করতে, আমি সিনট্যাক্স ব্যবহার করে পরীক্ষা করেছি style="{color:green;} :hover { color: red; }"এবং ফায়ারফক্স লিংকে সবুজ রঙিন করতে সক্ষম হয়েছে, তবে হোভারটিকে উপেক্ষা করেছে। ক্রোম উভয়ই উপেক্ষা করেছে। চালিয়ে যাওয়া পরীক্ষাটি বেশ অর্থহীন হবে।
জোনাথন ফিংল্যান্ড

9
আমি এটিকে কার্যনির্বাহী সমাধান হিসাবে বর্ণনা করি নি। আমি বলেছি যে কোনও ইনলাইন সমতুল্য নেই এবং এটি ছদ্ম নির্বাচকদের বাইরের স্টাইলশিটের কোনও অর্থ নেই তা বলা "সম্পূর্ণ" সঠিক ছিল না। কীভাবে অনুপযুক্ত?
কাটো

5
দীর্ঘ উত্তর কেন আপনার উচিত নয় ... আপনি ... আপনার সাধারণকরণ করা উচিত নয়। আমি এইচটিএমএল সহ ইমেল বার্তা প্রেরণ করার চেষ্টা করছিলাম, তবে অনুমান করুন কী ... gmail সমস্ত স্টাইল ট্যাগ, সমস্ত বাহ্যিক শৈলী রেফারেন্স এবং সমস্ত স্ক্রিপ্ট সরিয়ে দেয়। সুতরাং ... জিমেইলে প্রেরিত ইমেলের অভ্যন্তরে লিঙ্কগুলির বর্ণের রঙের স্টাইল করার কোনও উপায় আছে কি? আশা করি তা হয় ... আশা শেষ মরতে হয় !!! =)
মিগুয়েল অ্যাঞ্জেলো

433

আপনার পরামিতিগুলিতে onMouseOverএবং onMouseOutপরামিতিগুলিতে জাভাস্ক্রিপ্টের সাহায্যে আপনার স্টাইলগুলি পরিবর্তন করে আপনি একই প্রভাব পেতে পারেন , যদিও আপনাকে একাধিক উপাদান পরিবর্তন করার প্রয়োজন থাকলে এটি চূড়ান্তভাবে অক্ষম:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

এছাড়াও, আমি thisএই প্রসঙ্গে কাজ করে কিনা তা নিশ্চিত করে মনে করতে পারি না । আপনি এটি সঙ্গে স্যুইচ করতে হতে পারে document.getElementById('idForLink')


12
যে স্মার্ট! পাশাপাশি একটি ব্যাকগ্রাউন্ড কালার হোভার ইফেক্টের জন্যও কাজ করে<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
এমএক্স্রো

46
এটিকে 'চালাক' হিসাবে দেখলে হাসতে হবে :) কল্পনা করা শক্ত নয় যে কিছু লোক যখন আশেপাশের / একমাত্র উপায় যখন আপনি এই প্রভাবটি অর্জন করতে পারতেন তখন ছিল না। বা আরও খারাপ, একটি 'চিত্র' রাখতে এবং চিত্রটি সরিয়ে নিতে হবে, কেবল 'হোভার' প্রভাব দিতে হবে। আমাকে বুড়ো মনে হচ্ছে! তবে বলাই যথেষ্ট, এটি ওপি-র প্রশ্নের উত্তর দেয় :)
মানাচি

5
এই নিয়ে মানাচির সাথে আমার একমত হতে হবে। এটি 90 এর দশকের জিওসিটিস জাভাস্ক্রিপ্টের ফ্ল্যাশব্যাকের মতো; পি
এরিক কাস্ত্রো

9
পুরানো, নতুন, প্রাচীন বা সামনে এটি প্রশ্নের উত্তর দিয়েছে এবং আমাকে সহায়তা করেছে। ধন্যবাদ, @ পেটার
ব্যবহারকারী 2060451

4
আমার একটি ইমেলের জন্য এটি করা দরকার এবং এটি কার্যকর হয়েছিল। ধন্যবাদ! এটি প্রকৃতপক্ষে গৃহীত উত্তরের বিপরীতে প্রশ্নটি সমাধান করে।
TheUtherSide

53

আপনি অতীতের কোনও সময়ে এটি করতে পারেন । তবে এখন (একই স্ট্যান্ডার্ডের সর্বশেষ সংশোধনী অনুসারে, যা প্রার্থী প্রস্তাবনা) আপনি পারবেন না।


3
অন্য সমস্ত উত্তর বলেছে যে এটি সম্ভব নয়, তবে আপনার দেখানো সম্ভব যে এটি সম্ভব, আপনার উত্তরটি ভিন্ন, আমি এটি পরীক্ষা করছি।
আমর এলগারি

2
দুঃখিত, আমি কেবল নিবন্ধের তারিখটি পরীক্ষা করেছি। এটির বয়স 10 বছর। সুতরাং এটি কাজ করার কোনও গ্যারান্টি নেই। যদি তা হয় তবে দয়া করে আমাকেও বলুন।
ফুদ্দিন

2
আমি এটি পরীক্ষা করেছি: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> তবে এটি কার্যকর হয়নি
আমর এলগারি

5
: মামলা যে কেউ এই উত্তর জুড়ে আসে, ANSWERER এখানে এই বৈশিষ্ট্য সম্বন্ধে একটি প্রশ্ন পোস্ট stackoverflow.com/questions/9884182/...
BoltClock

9
আরও সঠিকভাবে বলতে গেলে , আপনি অতীতের কোনও সময় এটি করতে পারতেন । তবে এখন (একই মানের সর্বশেষ সংশোধনী অনুসারে, যা প্রার্থী প্রস্তাবনা) আপনি পারবেন না
ইলিয়া স্ট্রেলটসিন

34

আমি এতে অবদান রেখে দেরি করে চলেছি, তবে কেউ এটিকে প্রস্তাবিত না দেখে আমার দুঃখ হয়েছে, আপনার যদি সত্যই ইনলাইন কোড প্রয়োজন হয় তবে এটি করা সম্ভব। কিছু হওয়ার বোতামের জন্য আমার এটির দরকার ছিল, পদ্ধতিটি হ'ল:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

এই ক্ষেত্রে, ইনলাইন কোড: "পটভূমি-রঙ: লাল;" হোভারে স্যুইচ রঙ হ'ল, আপনার প্রয়োজনীয় রঙটি সেখানে intoুকিয়ে দিন এবং তারপরে এই সমাধানটি কাজ করে। আমি বুঝতে পারি এটি উপযুক্ততার ক্ষেত্রে নিখুঁত সমাধান নাও হতে পারে তবে এটি যদি একেবারে প্রয়োজন হয় তবে এটি কাজ করে।


4
ধন্যবাদ. এটি দুর্দান্ত উত্তর, আমি মনে করি এই উত্তরটি অবশ্যই সমাধান হিসাবে হওয়া উচিত।
হোভান্নেস সরগসায়ান

63
না, ওপি বলেছেন যে তারা এটি HTML শৈলীর বৈশিষ্ট্যের অভ্যন্তরে ইনলাইন সিএসএসে চেয়েছিলেন ।
jj_

3
আমি জানি, জেজে_- তবে এই পদ্ধতিটি আপনাকে সিএসএসে কয়েকটি লাইন রাখার অনুমতি দেয় এবং এটি বহু জায়গায় ব্যবহার করতে পারে, অনেক লোক (নিজেকে সহ) এটি একটি সহায়ক বিকল্প হিসাবে খুঁজে পেয়েছে।
lukesrw

2
এটি সামান্য পরিবর্তন সহ প্রকৃত উত্তর হওয়া উচিত: শৈলীতে কোনও রঙ সেট করবেন না, আবদ্ধ হওয়ার সময় পিতামাতার কাছ থেকে উত্তরাধিকারী হওয়ার নিয়ম এবং তারপরে দুটি রঙের ইনলাইন সেট করুন।
হায়কো কোরিউন

4
এটি করার জন্য এটি "সাধারণ" উপায়, যা প্রত্যেকেই বলছিল সঠিক উপায়। তবে এটি কোনও ইনলাইন উপায় নয়, এটি ওপির মূল অনুরোধ ছিল।
wcndave

31

আপনি যা বর্ণনা করছেন ঠিক তেমন করতে পারবেন না, যেহেতু a:hoverনির্বাচক অংশ, সিএসএস বিধি নয়। স্টাইলশীটের দুটি উপাদান রয়েছে:

selector {rules}

ইনলাইন শৈলীতে কেবল নিয়ম থাকে; নির্বাচকটি বর্তমান উপাদান হতে পারে না।

নির্বাচকটি একটি এক্সপ্রেশনাল ভাষা যা এক্সএমএলের মতো নথিতে উপাদানগুলির সাথে মেলে মানদণ্ডগুলির একটি সেট বর্ণনা করে।

তবে, আপনি কাছাকাছি styleযেতে পারেন , কারণ একটি সেট প্রযুক্তিগতভাবে প্রায় কোথাও যেতে পারে:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

3
আসলে আপনি পারবেন না: "এইচটিএমএল কোনও নথির হেড বিভাগে স্টাইলের কয়েকটি সংখ্যার অনুমতি দেয়” " ( w3.org/TR/html4/present/styles.html#edef-STYLE )
এরিক আরাউজো

2
আমার মেশিনে কাজ করে। ধন্যবাদ!
জোশ হাবদাস

@ এরিকআরাউজো: তারপরে এই সমস্ত সামগ্রী একটি <html> </html>ট্যাগের আওতায়
রাখুন

30

জাভাস্ক্রিপ্ট ব্যবহার:

ক) ইনলাইন শৈলী যুক্ত করা

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

খ) বা কিছুটা শক্ত পদ্ধতি - "মাউসওভার" যুক্ত করা

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

দ্রষ্টব্য: font-sizeজাভাস্ক্রিপ্টে বহু-শব্দ শৈলী (অর্থাত্ ) একসাথে লেখা হয়েছে :

element.style.fontSize="12px"


3
যেহেতু এই উত্তরটি সম্পাদনা করা হয়েছে, এখন এটি মূল প্রশ্নের সাথে সম্পূর্ণ অপ্রাসঙ্গিক বলে মনে হচ্ছে ...
বিল

1
বাহ, যে বাক্সের বাইরে ভাবছে ... আমি এটি ভালবাসি!
theglossy1

14

এটি সর্বোত্তম কোড উদাহরণ:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

মডারেটরের পরামর্শ: আপনার উদ্বেগকে আলাদা করুন।

এইচটিএমএল

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

জাতীয়

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}


10

সিএসএসের বর্তমান পুনরাবৃত্তিতে ইনলাইন সিউডোক্লাস ঘোষণাগুলি সমর্থিত নয় (যদিও আমি যা বুঝতে পারি তা এটি ভবিষ্যতের সংস্করণে আসতে পারে)।

আপাতত, আপনার সর্বোত্তম বাজি সম্ভবত আপনি স্টাইল করতে চান সেই লিঙ্কের উপরে কেবল একটি স্টাইল ব্লক সংজ্ঞায়িত করা:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

4
ভাগ্যক্রমে এই ধারণাটি বাদ দেওয়া হবে। (দেখুন lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , অধীনে "ওয়ার্কিং খসড়া পরিত্যক্ত"।)
Ms2ger

3
সেখানে একটি . এই উত্তরে অনুপস্থিত।
জোয়েল

9

সরু আউট হিসাবে, আপনি হোভার জন্য নির্বিচারে ইনলাইন শৈলী সেট করতে পারে না, কিন্তু আপনি মধ্যে হোভার কার্সার শৈলী পরিবর্তন করতে পারেন সিএসএস উপযুক্ত ট্যাগে নিম্নলিখিত ব্যবহার করছে:

style="cursor: pointer;"

2
এটি সেরা উত্তর হওয়া উচিত
ভ্লাদিস্লাভ গুলিয়ায়েভ

6
<style>a:hover { }</style>
<a href="/">Go Home</a>

হোভারটি একটি সিউডো ক্লাস, এবং সুতরাং এটি স্টাইল বৈশিষ্ট্যের সাথে প্রয়োগ করা যায় না। এটি নির্বাচক অংশ।


2
@ ডেরেক এখনও আগ্রহের ক্ষেত্রে / অন্য কারও পড়ার জন্য: "~ /" (টিল্ড ফরোয়ার্ড স্ল্যাশ) হ'ল এএসপিএন ওয়েব অ্যাপ্লিকেশনগুলির অ্যাপ্লিকেশন রুটের একটি সার্ভার-সাইড রেফারেন্স। (অ্যাপ্লিকেশন রুট অবশ্যই একটি উপ-ফোল্ডার হতে পারে)। এখানে এটি ব্যবহার সঠিক হবে না, সুতরাং আপনি প্রশ্ন জিজ্ঞাসা করার পরে উত্তরটি সম্পাদনার কারণ (আমার সন্দেহ)।
ক্রিস

5

তুমি এটি করতে পারো. তবে ইনলাইন শৈলীতে নয়। আপনি ব্যবহার করতে পারেন onmouseoverএবং onmouseoutইভেন্টগুলি:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>


4

আপনার মন্তব্য অনুসারে, আপনি যাইহোক একটি জাভাস্ক্রিপ্ট ফাইল প্রেরণ করছেন। জাভাস্ক্রিপ্টে রোলওভারটি করুন। jQuery এর $.hover()পদ্ধতিটি অন্য প্রতিটি জাভাস্ক্রিপ্টের মোড়কের মতো করে তোলে easy এটি সরাসরি জাভাস্ক্রিপ্টে খুব বেশি শক্ত নয়।


যদিও এটি প্রায় চারপাশের কাজ তবে এটি আমার পক্ষে খুব ভাল উত্তর এবং সেরা উত্তরটি যদি সত্যই ইনলাইন হোভার লিখতে সম্ভব না হয় তবে তা উত্তর দেয়
আমর এলগারি

4

এটি করার কোনও উপায় নেই। আপনার বিকল্পগুলি একটি জাভাস্ক্রিপ্ট বা সিএসএস ব্লক ব্যবহার করা।

হতে পারে এমন কিছু জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা মালিকানাধীন শৈলীর বৈশিষ্ট্যটিকে স্টাইল ব্লকে রূপান্তর করবে। তবে তারপরে কোডটি মান-সম্মতিযুক্ত হবে না।


2

আমি সবেমাত্র একটি আলাদা সমাধান বের করেছি।

আমার সমস্যা: আমার <a>কিছু স্লাইড / মূল সামগ্রী দর্শকের পাশাপাশি <a>পাদলেখের ট্যাগ রয়েছে। আমি চাই যে তারা আইই তে একই জায়গায় যেতে পারে, সুতরাং onHoverলিঙ্ক না হলেও পুরো অনুচ্ছেদটি আন্ডারলাইন করা হবে : সামগ্রিকভাবে স্লাইডটি একটি লিঙ্ক। আইই পার্থক্যটি জানেন না। আমার পাদলেখগুলিতে আমার কিছু আসল লিঙ্ক রয়েছে যাগুলির আন্ডারলাইন এবং রঙ পরিবর্তন দরকার onHover। আমি ভেবেছিলাম রঙ পরিবর্তন করার জন্য আমাকে ফুটার ট্যাগগুলির সাথে শৈলীর ইনলাইন রাখতে হবে, তবে উপরের পরামর্শগুলি পরামর্শ দেয় যে এটি অসম্ভব।

সমাধান: আমি পাদলেখ লিঙ্ক দুটি পৃথক ক্লাসে দিয়েছি, এবং আমার সমস্যা সমাধান হয়েছে। আমি onHoverএক শ্রেণিতে রঙ পরিবর্তন করতে সক্ষম হয়েছি , স্লাইডগুলির onHoverকোনও রঙ পরিবর্তন / আন্ডারলাইন নেই, এবং এখনও একই সাথে ফুটার এবং স্লাইডগুলিতে বাহ্যিক এইচআরআইএফএস রাখতে সক্ষম!


1

আমি একমত ছায়া । আপনি জাভাস্ক্রিপ্টের মাধ্যমে সিএসএস পরিবর্তন করতে onmouseoverএবং onmouseoutইভেন্টটি ব্যবহার করতে পারেন ।

এবং বলবেন না যে লোকদের জাভাস্ক্রিপ্ট সক্রিয় করা দরকার। এটি কেবল একটি স্টাইল ইস্যু, সুতরাং জাভাস্ক্রিপ্ট ব্যতীত কিছু দর্শক আছে কিনা তা বিবেচ্য নয়;) যদিও ওয়েব 2.0 এর বেশিরভাগ জাভাস্ক্রিপ্ট নিয়ে কাজ করে। উদাহরণস্বরূপ ফেসবুক দেখুন (জাভাস্ক্রিপ্ট প্রচুর) বা মাইস্পেস


0

গেমটিটি বেশ দেরি হয়ে গেছে, তবে আপনি কখন এইচটিএমএল ইমেলটিতে জাভাস্ক্রিপ্ট ব্যবহার করবেন? উদাহরণস্বরূপ, আমি বর্তমানে যে সংস্থার জন্য কাজ করছি (অ্যাবোডি সহ ছড়া), আমরা বেশিরভাগ ইমেল বিপণন প্রচারের জন্য সর্বনিম্ন সাধারণ ডিনোমিনেটর ব্যবহার করি - এবং জাভাস্ক্রিপ্টটি কেবল ব্যবহৃত হচ্ছে না। কখনো। যদি না আপনি কোনও প্রকার প্রাক প্রসেসিংয়ের কথা উল্লেখ করছেন।

সম্পর্কিত পোস্টে যেমন উল্লেখ করা হয়েছে: "লোটাস নোটস, মজিলা থান্ডারবার্ড, আউটলুক এক্সপ্রেস এবং উইন্ডোজ লাইভ মেল সকলেই কিছুটা জাভাস্ক্রিপ্ট কার্যকর করার জন্য সমর্থন করে বলে মনে হচ্ছে। অন্য কিছুই করেনি।"

যে নিবন্ধ থেকে এটি নেওয়া হয়েছিল তার লিঙ্ক: [ http://en.wikedia.org/wiki/Compistance_of_e-mail_clients]

এছাড়াও, কীভাবে মোবাইল ডিভাইসে অনুবাদ করা হবে? এজন্য আমি উপর থেকে উত্তরটি পছন্দ করি:Long answer: you shouldn't.

কারও কাছে যদি এই বিষয়ে আরও অন্তর্দৃষ্টি থাকে তবে দয়া করে আমাকে সংশোধন করুন। ধন্যবাদ.


0

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

আমি কিছু রঙ সংজ্ঞায়িত করেছি এবং প্রতিটি উপাদানগুলির জন্য হ্যান্ডেলবারের টেম্পলেটে এনেছি। টেমপ্লেটের শীর্ষে আমি একটি শৈলী ট্যাগ সংজ্ঞায়িত করেছি, এবং আমার কাস্টম ক্লাসে রেখেছি এবং রঙ হোভার করেছি।

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

তারপরে আমি টেমপ্লেটে স্টাইলটি ব্যবহার করেছি:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

আপনার দরকার নেই !important


0

আপনি বিভিন্ন ধরণের একটি কোড লিখতে পারেন

প্রথমে আমি এটি লিখতে পারি

এইচটিএমএল

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a> 

CSS

.one{
  text-decoration: none;
}

আপনি অন্যভাবে চেষ্টা করতে পারেন

এইচটিএমএল

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

আপনি jquery এ ঘোরাতে চেষ্টা করতে পারেন

জাভা লিপি

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

এইচটিএমএল

<p>Hover the mouse pointer over this paragraph.</p>

এই কোডটিতে আপনার jquery এ তিনটি ফাংশন রয়েছে প্রথমে আপনি একটি ফাংশন প্রস্তুত করেন যা jquery এর ফাংশনটির মৌলিক তারপর দ্বিতীয় আপনি যখন এই ফাংশনে একটি হোভার ফাংশন রাখবেন যখন আপনি পাঠ্যের কোনও পয়েন্টারটি রাখবেন তখন রঙটি পরিবর্তন হবে এবং তারপরে পরবর্তী আপনি যখন পাঠ্যের দিকে পয়েন্টারটি প্রকাশ করবেন তখন এটি ভিন্ন রঙ হবে এবং এটি তৃতীয় ফাংশন


দয়া করে সদৃশ
জবাবগুলি

ঠিক আছে স্যার সিমাস-জোনেলিউনস
সিরাজ আহমেদ

এই পদ্ধতির কোনওটিই প্রশ্নটিতে প্রকাশিত সমস্যার সমাধান করে না। আপনি মোটেও এইচটিএমএল ফর্ম্যাট ইমেলটিতে জেএস ব্যবহার করতে পারবেন না এবং আপনি যে পরামর্শ দিয়েছেন সেগুলি ব্যবহার করার জন্য অন্যান্য পদ্ধতির দ্বারা ক্লাসগুলি ব্যবহার করা উচিত যা স্পষ্টতই প্রত্যাখ্যানযোগ্য।
কোয়ান্টিন


-1

আমাকে জাভাস্ক্রিপ্ট এড়াতে হয়েছিল, তবে সার্ভার সাইড কোড সহ যেতে পারলাম।

সুতরাং আমি একটি আইডি উত্পন্ন করেছি, একটি স্টাইল ব্লক তৈরি করেছি, সেই আইডিটির সাথে লিঙ্কটি তৈরি করেছি। হ্যাঁ এর বৈধ এইচটিএমএল।

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>


-2

আপনি a:hoverকেবল বহিরাগত স্টাইল শিটগুলিতে সিউডো-ক্লাস ব্যবহার করতে পারেন । সুতরাং আমি বাহ্যিক স্টাইল শীট ব্যবহার করার পরামর্শ দিচ্ছি recommend কোডটি হ'ল:

a:hover {color:#FF00FF;}   /* Mouse-over link */

অবশ্যই আপনার বাহ্যিক শিটের দরকার নেই, কেবল styleট্যাগটি ব্যবহার করুন ।
দিমিত্রি জইতসেভ 4'17

-2

আপনি ক্লাস যুক্ত করে আইডি করতে পারেন তবে কখনই ইনলাইন নয়।

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 টি লাইন তবে আপনি সর্বত্র ক্লাসটি পুনরায় ব্যবহার করতে পারেন।


-3

আমার সমস্যাটি হ'ল আমি এমন একটি ওয়েবসাইট তৈরি করছি যা প্রচুর চিত্র-আইকন ব্যবহার করে যা হোভারের উপর একটি আলাদা চিত্র দ্বারা অদলবদল করতে হয় (যেমন নীল-ইশ চিত্রগুলি হোভারের উপর লাল-ইশ পরিণত হয়)। আমি এর জন্য নিম্নলিখিত সমাধানটি উত্পাদন করেছি:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

আমি চিত্রের জোড়াযুক্ত একটি ধারক প্রবর্তন করলাম। প্রথমটি দৃশ্যমান এবং অন্যটি গোপন রয়েছে (প্রদর্শন: কিছুই নয়)। ধারকটি ঘোরাতে গিয়ে, প্রথমটি লুকানো হয়ে যায় (প্রদর্শন: কিছুই নয়) এবং দ্বিতীয়টি আবার প্রদর্শিত হয় (প্রদর্শন: ব্লক)।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.