ওভার-ওভার পরিবর্তন করতে ডিভ পটভূমির রঙ

Question

আমি মাউসের ওপরে একটি ডিভের পটভূমির রঙ পরিবর্তন করার চেষ্টা করছি ।

ডিভ {ব্যাকগ্রাউন্ড: সাদা;
div ডিএ আ: হোভার {পটভূমি: ধূসর; প্রস্থ: 100%;
প্রদর্শন ব্লক; পাঠ্য-সজ্জা: কিছুই নয়}

শুধুমাত্র লিংক DIV আছে ভিতরে পটভূমির রঙ পায় ।

পুরো ডিভটিকে সেই ব্যাকগ্রাউন্ডের রঙ পেতে আমি কী করতে পারি ?

ধন্যবাদ

সম্পাদনা করুন:
আমি কীভাবে পুরো ডিভকে একটি লিঙ্ক হিসাবে কাজ করতে পারি - যখন আপনি সেই ডিভিতে যে কোনও জায়গায় ক্লিক করেন, আপনাকে কোনও ঠিকানায় নিয়ে যায়।

Comments

এই লিঙ্কটি চেষ্টা করুন কোডবিনস

— কোডস / হোম /

Answer 1

" a:hover" আক্ষরিক অর্থে ব্রাউজারকে <a>-ট্যাগের বৈশিষ্ট্যগুলি পরিবর্তন করতে বলে , যখন মাউসটি তার উপরে আটকানো থাকে। the div:hoverপরিবর্তে আপনি " " যা বোঝাতে চেয়েছিলেন তা হ'ল ডিভটি বেছে নেওয়া হলে এটি ট্রিগার করবে।

কেবলমাত্র নিশ্চিত করার জন্য, আপনি যদি কেবল একটি নির্দিষ্ট ডিভি পরিবর্তন করতে চান তবে এটিকে একটি আইডি (" <div id='something'>") দিন এবং #something:hover {...}পরিবর্তে CSS " " ব্যবহার করুন। আপনি যদি ডিভের একটি গ্রুপ সম্পাদনা করতে চান, তাদের একটি শ্রেণিতে পরিণত করুন (" <div class='else'>") এবং .else {...}এই ক্ষেত্রে সিএসএস " " ব্যবহার করুন (শ্রেণীর নামের আগে সময়কালটি নোট করুন!)

Answer 2

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

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

Answer 3

অ্যাঙ্কর লাগানোর দরকার নেই। হোভারের উপর ডিভের স্টাইল পরিবর্তন করতে তারপরে হোভারের উপর ডিভের ডিভের পটভূমির রঙ পরিবর্তন করুন।

<div class="div_hover"> Change div background color on hover</div>

.Css পৃষ্ঠায়

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

Answer 4

পুরো ডিভকে একটি লিঙ্ক হিসাবে কাজ করতে, অ্যাঙ্কর ট্যাগটি সেট করুন:

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>

শুভকামনা!

Answer 5

এইচটিএমএল কোড:

    <!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;
     }

এবং আপনি কীভাবে আপনার ডিভটিকে লাল থেকে নীলতে পরিবর্তন করবেন তার উপর দিয়ে ঘুরে বেড়াবেন।

Answer 6

সেট

display: block;

উপর একটি এবং কিছু উচ্চতা দিতে

Answer 7

সিএসএসের সম্পত্তি "হোভার" করার চেষ্টা করুন। যেমন:

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

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

Answer 8

আপনি কেবল ডিভের চারপাশে অ্যাঙ্কর রাখতে পারেন।

<a class="big-link"><div>this is a div</div></a>

এবং তারপর

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

Answer 9

আপনি এইভাবে অ্যাঙ্কার ট্যাগে ডিভটি রাখতে পারবেন:

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>

Answer 10

কেবল !importantআপনার সিএসএস ফাইলে সম্পত্তি তৈরি করুন যাতে মাউসের উপরে পটভূমির রঙ পরিবর্তন না হয় his এটি আমার পক্ষে কাজ করেছে।

উদাহরণ:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

Comments

উত্তরের সাথে আপনার আরও কিছু বিশদ সংযুক্ত করার চেষ্টা করা উচিত, কারণ এটি অবশ্যই প্রশ্নের পুরোপুরি উত্তর দিচ্ছে না।

— তাতরান্সকিমেডভেদে