मेजबान पंक्ति

Question

पर होवर पर दिखाई देने वाले ट्विटर बूटस्ट्रैप बटन मेरे पास प्रत्येक पंक्ति के अंतिम कक्ष में एक बटन समूह के साथ एक ट्विटर बूटस्ट्रैप तालिका है।

मैं इन बटन दिखाई केवल जब उपयोगकर्ता पंक्ति पर घूमता चाहते हैं। साथ ही, जब उपयोगकर्ता पंक्ति पर (बटन समूह समूह पर नहीं) हो जाता है तो केवल आइकन दिखने चाहिए, और जब वह बटन समूह आइकन पर होवर करता है तो उसे बटन की तरह प्रदर्शित किया जाना चाहिए।

यहाँ html लेआउट के साथ एक बेला है मैं http://jsfiddle.net/hDafj/

का उपयोग और यह मैं पहले से ही करने के लिए http://jsfiddle.net/hDafj/2

Answer 1

खैर, मुझे लगता है कि वैसे भी आपको कुछ अतिरिक्त शैलियों यहाँ की जरूरत है। मैंने बटनों की सीमाओं, छाया और पृष्ठभूमि को सफेद बनाने के लिए .btn-group-hover कक्षा को जोड़ा है (इस तरह वे हमेशा एक ही आकार के होंगे)। पंक्ति 0 होवर पर सफेद पृष्ठभूमि पर सफेद दिखाई देने से बचने के लिए सभी .icon-white आइकनों को अलग से इलाज किया जाना चाहिए। यहां मेरा सुझाया गया समाधान है: http://jsfiddle.net/hDafj/3/ लेकिन यहां एकमात्र मुद्दा यह है कि यह केवल सफेद tr पृष्ठभूमि पर अच्छा दिखता है।

Answer 2

हम सिर्फ CSS

सीएसएस के साथ ऐसा कर सकते हैं की कोशिश की क्या है

table.table tr td div.btn-group { display:none;} 
table.table tr:hover td div.btn-group { display:inline-block;} 

यहाँ अद्यतन fiddle

Answer 3

कोशिश इस http://jsfiddle.net/guyisra/hDafj/5/ जो मदद कर सकता है आप आरंभ (संरेखण, जो आप d पंक्ति के लिए वर्ग और सीएसएस जोड़ने के लिए अपने स्वयं के

उपयोग js पर होवर कर सकते हैं

$(".btn-group a").hover(function() { 
    $(this).addClass("btn"); 
}, function() { 
    $(this).removeClass("btn"); 
} 

); 

सीएसएस को ठीक करने की जरूरत है

.btn-group { 
    visibility:hidden; 
} 
table tr:hover .btn-group { 
    visibility:visible; 
}