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


106

मेरे पास क्लास 'टेबल-होवर' वाली एक टेबल है। रंग पर डिफ़ॉल्ट मंडराना एक सफेद / हल्का ग्रे है। मैं इस रंग को कैसे बदलूं?

मैंने अपने प्रमुख स्टाइल शीट में निम्नलिखित जोड़कर डिफ़ॉल्ट को ओवरराइट करने का प्रयास किया है

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

दुर्भाग्य से, ऊपर काम नहीं करता है

जवाबों:


231

इसे आजमाइए:

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

4
क्यों tdजरूरी है? (क्षमा करें, मैं css में बेकार हूं, सीखने की कोशिश कर रहा हूं)
अलेक्जेंडर डर्क

6
@AlexanderDerck मुझे लगता है कि यह थोड़ा देर हो सकती है, लेकिन td की आवश्यकता है क्योंकि यह अपनी पंक्ति से डोम को और नीचे कर रहा है, और अगर वहाँ एक पृष्ठभूमि पहले से ही td पर लागू है, तो आप पंक्ति की पृष्ठभूमि नहीं देखेंगे क्योंकि यह ' पंक्ति के बाद पेंट किया जाएगा।
पालू मैकिल

18

यह मेरे लिए काम किया:

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

18

यह इमो करने का सबसे सरल तरीका था और इसने मेरे लिए काम किया।

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

निश्चित नहीं है कि आप शीर्ष रंग के रूप में पंक्तियों के रूप में शीर्ष रंग क्यों बदलना चाहते हैं, लेकिन यदि आप ऐसा करते हैं तो आप उपरोक्त समाधान का उपयोग कर सकते हैं। अगर आप सिर्फ टी चाहते हैं


6

यह बूटस्ट्रैप 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;

1
किसी के लिए यह npm का उपयोग कर ठोकर खा रहा है, यह वास्तव में है $table-hover-bg,$table-active-bg और इतने पर, नहीं $table-bg-...। सोचा था कि मैं एक मिनट के लिए पागल हो रहा था
m

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>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</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


कुछ अन्वेषण आपके उत्तर को बेहतर ढंग से समझने में मदद करेंगे।
रोमानो ज़ुम्बे


1

मेरे लिए @ pvskisteak5 उत्तर ने "झिलमिलाहट-प्रभाव" पैदा किया है। इसे ठीक करने के लिए, निम्नलिखित जोड़ें:

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

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

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


0

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

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.