বুটস্ট্র্যাপে হোভার ওভার টেবিলের জন্য আমি কীভাবে হোভার ওভার রঙ পরিবর্তন করব?

Question

ক্লাস 'টেবিল-হোভার' সহ আমার একটি টেবিল রয়েছে। রঙের ডিফল্ট হোভারটি সাদা / হালকা ধূসর। আমি এই রঙটি কীভাবে পরিবর্তন করব?

আমি আমার প্রভাবশালী স্টাইল শীটে নিম্নলিখিতগুলি যুক্ত করে ডিফল্টকে ওভাররাইটিংয়ের চেষ্টা করেছি

.table-hover tbody tr:hover > th {
  background-color: #D1D119;
}

দুর্ভাগ্যক্রমে, উপরেরগুলি কাজ করে না

Answer 1

একবার চেষ্টা করে দেখুন:

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #color;
}

Comments

কেন tdদরকার? (দুঃখিত আমি

— সিএসএসে

@ আলেকজান্দার ডার্ক আমি মনে করি এটি কিছুটা দেরি হতে পারে তবে টিডি দরকার কারণ এটি আরও সারি থেকে ডোমটি আরও নিচে নামিয়েছে এবং যদি টিডিতে ইতিমধ্যে কোনও পটভূমি প্রয়োগ করা থাকে তবে আপনি সারিটির পটভূমি দেখতে পাবেন না কারণ এটি ' সারি পরে আঁকা হবে।

— পালু ম্যাকিল

Answer 2

এটি আমার পক্ষে কাজ করেছে:

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #eeeeea;
}

Answer 3

এটি ইমো করার সবচেয়ে সহজ উপায় ছিল এবং এটি আমার পক্ষে কাজ করেছিল।

.table-hover tbody tr:hover td {
    background: aqua;
}

আপনি কেন শিরোনামের মতো একই হোভার রঙে শিরোনামের রঙ পরিবর্তন করতে চান তা নিশ্চিত নয় তবে যদি আপনি তা করেন তবে আপনি উপরের সমাধানগুলি ব্যবহার করতে পারেন। আপনি যদি শুধু টি চান

Answer 4

এটি গ্রান্ট বা অন্য কোনও টাস্ক রানারের মাধ্যমে সংকলিত বুটস্ট্র্যাপ ভি 4 এর জন্য

$table-hover-bgহোভারের উপর হাইলাইট সেট করতে আপনাকে পরিবর্তন করতে হবে

$table-cell-padding:            .75rem !default;
$table-sm-cell-padding:         .3rem !default;

$table-bg:                      transparent !default;
$table-accent-bg:               rgba(0,0,0,.05) !default;
$table-hover-bg:                rgba(0,0,0,.075) !default;
$table-active-bg:               $table-hover-bg !default;

$table-border-width:            $border-width !default;
$table-border-color:            $gray-lighter !default;

Comments

এই npm ব্যবহার করে হুমড়ি যে কেউ জন্য, এটি আসলে $table-hover-bg,$table-active-bg এবং তাই, না $table-bg-...। ভেবেছিলাম আমি এক মিনিটের জন্য পাগল হয়ে যাচ্ছি 😅

— জায়েজ

Answer 5

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

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>

সিএসএস কোড

.table-hover thead tr:hover th, .table-hover tbody tr:hover td {
    background-color: #D1D119;
}

সিএসএস কোড নির্দেশ করে যে:

সারি উপর মাউস:

.table-hover> thead> tr: hover

এর পটভূমির রঙ # D1D119 এ পরিবর্তিত হবে

ম

একই ক্রিয়াটি কারওর জন্য ঘটবে

.table-hover tbody tr: হোভার টিডি

Comments

কিছু ব্যাখ্যা আপনার উত্তরকে আরও ভালভাবে ছাপিয়ে যেতে সহায়তা করবে।

— রোমানো জুম্ব

Answer 6

চেষ্টা করে দেখুন:

.table-hover > tbody > tr.active:hover > th {
                background-color: #color;
            }

Answer 7

আমার জন্য @ pvskisteak5 উত্তর একটি "ঝাঁকুনি-প্রভাব" তৈরি করেছে। এটি ঠিক করতে, নিম্নলিখিতগুলি যুক্ত করুন:

            .table-hover tbody tr:hover,
            .table-hover tbody tr:hover td,
            .table-hover tbody tr:hover th{
                background:#22313F !important;
                color:#fff !important;
            }

Answer 8

.table-hover tbody tr:hover td {
    background: aqua;
}

এটি এখন পর্যন্ত আমি সেরা সমাধান করতে পারি it এই জাতীয় দৃশ্যে পুরোপুরি কাজ করে

Answer 9

ডিফল্ট টেবিল-হোভার ক্লাসটি পরিবর্তনের পরিবর্তে একটি নতুন শ্রেণি তৈরি করুন (অন্যদিকে) এবং আপনার এই প্রভাবটি টেবিলটিতে প্রয়োগ করুন for

নীচের মত কোড;

.anotherhover tbody tr:hover td { background: CornflowerBlue; }

Answer 10

উদাহরণস্বরূপ, hoveable সারি.table-hover প্রয়োগ করতে বুটস্ট্র্যাপের বর্গ চেষ্টা করুন

<table class="table table-hover">
  ...
</table>