আমি মাউসের ওপরে একটি ডিভের পটভূমির রঙ পরিবর্তন করার চেষ্টা করছি ।
ডিভ {ব্যাকগ্রাউন্ড: সাদা;
div ডিএ আ: হোভার {পটভূমি: ধূসর; প্রস্থ: 100%;
প্রদর্শন ব্লক; পাঠ্য-সজ্জা: কিছুই নয়}
শুধুমাত্র লিংক DIV আছে ভিতরে পটভূমির রঙ পায় ।
পুরো ডিভটিকে সেই ব্যাকগ্রাউন্ডের রঙ পেতে আমি কী করতে পারি ?
ধন্যবাদ
সম্পাদনা করুন:
আমি কীভাবে পুরো ডিভকে একটি লিঙ্ক হিসাবে কাজ করতে পারি - যখন আপনি সেই ডিভিতে যে কোনও জায়গায় ক্লিক করেন, আপনাকে কোনও ঠিকানায় নিয়ে যায়।
উত্তর:
" a:hover" আক্ষরিক অর্থে ব্রাউজারকে <a>-ট্যাগের বৈশিষ্ট্যগুলি পরিবর্তন করতে বলে , যখন মাউসটি তার উপরে আটকানো থাকে। the div:hoverপরিবর্তে আপনি " " যা বোঝাতে চেয়েছিলেন তা হ'ল ডিভটি বেছে নেওয়া হলে এটি ট্রিগার করবে।
কেবলমাত্র নিশ্চিত করার জন্য, আপনি যদি কেবল একটি নির্দিষ্ট ডিভি পরিবর্তন করতে চান তবে এটিকে একটি আইডি (" <div id='something'>") দিন এবং #something:hover {...}পরিবর্তে CSS " " ব্যবহার করুন। আপনি যদি ডিভের একটি গ্রুপ সম্পাদনা করতে চান, তাদের একটি শ্রেণিতে পরিণত করুন (" <div class='else'>") এবং .else {...}এই ক্ষেত্রে সিএসএস " " ব্যবহার করুন (শ্রেণীর নামের আগে সময়কালটি নোট করুন!)
জাভাস্ক্রিপ্ট ব্যবহার করে
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Jack and Jill went up the hill
To fetch a pail of water.
Jack fell down and broke his crown,
And Jill came tumbling after.
</div>
অ্যাঙ্কর লাগানোর দরকার নেই। হোভারের উপর ডিভের স্টাইল পরিবর্তন করতে তারপরে হোভারের উপর ডিভের ডিভের পটভূমির রঙ পরিবর্তন করুন।
<div class="div_hover"> Change div background color on hover</div>
.Css পৃষ্ঠায়
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }
পুরো ডিভকে একটি লিঙ্ক হিসাবে কাজ করতে, অ্যাঙ্কর ট্যাগটি সেট করুন:
display: block
এবং আপনার অ্যাঙ্কর ট্যাগের উচ্চতা 100% এ সেট করুন। তারপরে আপনার ডিভ ট্যাগে একটি নির্দিষ্ট উচ্চতা সেট করুন। তারপরে আপনার অ্যাঙ্কর ট্যাগটিকে যথারীতি স্টাইল করুন।
উদাহরণ স্বরূপ:
<html>
<head>
<title>DIV Link</title>
<style type="text/css">
.link-container {
border: 1px solid;
width: 50%;
height: 20px;
}
.link-container a {
display: block;
background: #c8c8c8;
height: 100%;
text-align: center;
}
.link-container a:hover {
background: #f8f8f8;
}
</style>
</head>
<body>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
</body> </html>
শুভকামনা!
এইচটিএমএল কোড:
<!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>
সিএসএস কোড:
.nicecolor {
color:red;
width:200px;
height:200px;
}
.nicecolor:hover {
color:blue;
}
এবং আপনি কীভাবে আপনার ডিভটিকে লাল থেকে নীলতে পরিবর্তন করবেন তার উপর দিয়ে ঘুরে বেড়াবেন।
সিএসএসের সম্পত্তি "হোভার" করার চেষ্টা করুন। যেমন:
<html>
<head>
<style>
div
{
height:100px;
width:100px;
border:2px solid red;
}
div:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="#">
<div id="ab">
<p> hello there </p>
</div>
</a>
</body>
আমি আশা করি এটি সাহায্য করবে
আপনি এইভাবে অ্যাঙ্কার ট্যাগে ডিভটি রাখতে পারবেন:
a{
text-decoration:none;
color:#ffffff;
}
a div{
width:100px;
height:100px;
background:#ff4500;
}
a div:hover{
background:#0078d7;
}<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>কেবল !importantআপনার সিএসএস ফাইলে সম্পত্তি তৈরি করুন যাতে মাউসের উপরে পটভূমির রঙ পরিবর্তন না হয় his এটি আমার পক্ষে কাজ করেছে।
উদাহরণ:
.fbColor {
background-color: #3b5998 !important;
color: white;
}