माउसओवर

Question

पर tr तत्व के पृष्ठभूमि रंग को बदलना मैं अपनी टेबल पंक्तियों को माउस पर हाइलाइट करना चाहता हूं, लेकिन मुझे ऐसा करने का कोई तरीका नहीं मिला है जो जावास्क्रिप्ट का उपयोग नहीं कर रहा है। क्या यह सीएसएस में संभव नहीं है?

मैं इस की कोशिश की है:

tr:hover { 
    background: #000; 
} 

लेकिन वह काम नहीं करता। td:hover का उपयोग करना, लेकिन मैं पूरी तालिका पंक्ति का पृष्ठभूमि रंग बदलना चाहता हूं।

क्या ऐसा करने के लिए एक शुद्ध सीएसएस/एचटीएमएल तरीका है, या क्या मुझे जावास्क्रिप्ट का सहारा लेना होगा?

Answer 1

आप की कोशिश कर सकते:

tr:hover { 
    background-color: #000; 
} 

tr:hover td { 
    background-color: transparent; /* or #000 */ 
} 

JS Fiddle demo।

Answer 2

<tr> है खुद को सीएसएस के साथ उपयोग करने के लिए बहुत मेहनत कर रहे हैं, की कोशिश tr:hover td {background:#000}

Answer 3

tr:hover td {background-color:#000;} 

Answer 4

आप टीआर एक आईडी देने के लिए और यह कर सकते हैं।

tr#element{ 
    background-color: green; 
    cursor: pointer; 
    height: 30px; 

} 

tr#element:hover{ 
    background-color: blue; 
    cursor: pointer; 

} 

<table width="400px"> 
<tr id="element"> 
<td></td> 
</tr> 
</table> 

Answer 5

यह आसान है। बस अपने सीएसएस पंक्ति के अंत में जोड़ने के महत्वपूर्ण:

tr:hover { background: #000 !important; } 

Answer 6

यह काम करेगा:

tr:hover { 
    background: #000 !important; 
} 

आप उसके बाद ही टीडी पर bg-रंग लागू करना चाहते हैं:

tr:hover td { 
    background: #c7d4dd !important; 
} 

यह आपके दिए गए रंग को भी ओवरराइट करेगा और इसे बलपूर्वक लागू करेगा।

Answer 7

मैं एक ही समस्या थी:

tr:hover { background: #000 !important; } 

Allone काम नहीं किया है, लेकिन

tr:hover td { background: transparent; } 

मेरी सीएसएस की अगली पंक्ति में था मेरे लिए काम जोड़ने !! मेरी समस्या यह थी कि कुछ टीडी में पहले से ही पृष्ठभूमि-रंग असाइन किया गया था और मुझे नहीं पता था कि मुझे tr को बनाने के लिए ट्रांसफर को सेट करना होगा: होवर काम।

वास्तव में, मैं यह एक classnames के साथ प्रयोग किया: इन उत्तरों के लिए

.trclass:hover { background: #000 !important; } 
.trclass:hover td { background: transparent; } 

धन्यवाद, वे मेरा दिन बना दिया !! :)

Answer 8

tr:hover td.someclass { 
    background: #EDB01C; 
    color:#FFF; 
} 

केवल SomeClass सेल उजागर