मैं बूटस्ट्रैप में टेबल पर होवर के लिए रंग पर होवर को कैसे बदलूं?

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जरूरी है? (क्षमा करें, मैं css में बेकार हूं, सीखने की कोशिश कर रहा हूं)

— अलेक्जेंडर डर्क

@AlexanderDerck मुझे लगता है कि यह थोड़ा देर हो सकती है, लेकिन td की आवश्यकता है क्योंकि यह अपनी पंक्ति से डोम को और नीचे कर रहा है, और अगर वहाँ एक पृष्ठभूमि पहले से ही 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

यह बूटस्ट्रैप v4 के लिए है जिसे ग्रंट या किसी अन्य कार्य धावक के माध्यम से संकलित किया गया है

आपको $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-...। सोचा था कि मैं एक मिनट के लिए पागल हो रहा था

— m

Answer 5

HTML कोड :

<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-होवर> thead> tr: hover

वें की पृष्ठभूमि का रंग # D1D119 में बदल जाएगा

वें

Tbody के लिए एक ही कार्रवाई होगी

.table-होवर tbody tr: होवर td

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

यह सबसे अच्छा समाधान है जिसे मैं अब तक पासा सकता हूं। यह इस तरह के क्षेत्र में पूरी तरह से काम करता है

Answer 9

डिफॉल्ट टेबल-होवर क्लास को बदलने के बजाय, एक नया क्लास (दूसराओवर) बनाएं और इसे उस टेबल पर लागू करें जिसके लिए आपको इस प्रभाव की आवश्यकता है।

नीचे के रूप में कोड;

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

Answer 10

उदाहरण के लिए, हॉवर.table-hover करने योग्य पंक्तियों को लागू करने के लिए बूटस्ट्रैप की कक्षा का प्रयास करें

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