होवर पर टेक्स्ट बदलें, फिर पिछले टेक्स्ट पर वापस जाएं

Question

मेरे पास टिप्पणियों की एक प्रणाली है, और प्रत्येक टिप्पणी में एक बटन होता है जो आमतौर पर इसके उत्तरों की संख्या प्रदर्शित करता है। मैं चाहता हूं कि जब कोई उपयोगकर्ता बटन पर हो जाता है, तो पाठ "3 उत्तरों" से "उत्तर दें" में बदल जाता है, और फिर, जब माउस बटन छोड़ देता है, तो टेक्स्ट "3 उत्तरों" पर वापस आता है।

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

किसी भी मदद की सराहना की, धन्यवाद!

Answer 1

हां, आप सीएसएस content का उपयोग कर सकते हैं। सामान्य पाठ और "उत्तर दें!" के बीच स्विच करने के लिए, सामान्य पाठ को span में रखें और होवर करते समय इसे छुपाएं।

HTML:

<button><span>3 replies</span></button> 

सीएसएस:

button {width:6em} 
button:hover span {display:none} 
button:hover:before {content:"Reply!"} 

jsFiddle:

http://jsfiddle.net/4xcw7/2/

संपादित करें: इस IE8 में काम करता है, लेकिन इसकी संगतता मोड में नहीं है, इसलिए मुझे लगता है आईई 7 बाहर है। क्या यह एक समस्या होगी?

Answer 2

$('#button_id').hover(
    function(){ 
     $(this).text('Reply!'); 
    }, 
    function(){ 
     $.ajax({ 
      url: 'script.php', 
      type: 'post', 
      data: comment_id, 
      success: function(num_replies){ 
       $('#button_id').text(num_replies + ' replies'); 
      } 
     }); 
    } 
); 

मैं तुम्हें समारोह में इस तरह इस्तेमाल कर सकते हैं लगता है, जब आप मँडरा बंद करो, तुम को खिलाने के ajax अपनी टिप्पणी कॉल आईडी, और यह कि टिप्पणी के लिए उत्तर की # देता है। आप तय कर सकते हैं कि आप अपनी टिप्पणी आईडी कैसे स्टोर/पुनर्प्राप्त करना चाहते हैं।

Answer 3

मैं jQuery .hover() और jQuery का एक संयोजन का प्रयोग करेंगे .data():

http://jsfiddle.net/5W4Bd/

HTML:

<div id="myDiv">default text</div> 

जावास्क्रिप्ट:

$('#myDiv') 
    .data('textToggle', 5) 
    .hover(function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    }, function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    }); 

संपादित करें: गुमनाम refactor करने के लिए स्वतंत्र लग रहा है कामकाज होवर करने के लिए दो कॉलबैक के रूप में उपयोग किया जाता है, क्योंकि वे बिल्कुल वही हैं :)

Answer 4

मुझे लगता है कि यह इसके लिए जाने का एक सीधा तरीका होगा। अपने बटन के अंदर दो स्पैन का उपयोग करें, एक सामग्री 'x उत्तरों' के साथ, एक सामग्री 'उत्तर!' के साथ। सीएसएस का उपयोग करना और: होवर, आप बस स्विच करें कि होवर पर कौन सा अवधि दिखाया गया है।

HTML:

<button> 
    <span class="replies">5 Replies</span> 
    <span class="comment">Reply!</span> 
</button> 

सीएसएस:

button .comment { display: none; } 
button:hover .replies { display: none; } 
button:hover .comment { display: inline; } 

JsFiddle उदाहरण की जाँच करें।यह सब कुछ के बारे में ठीक काम करता है, क्योंकि यह समान आधारभूत लक्ष्य प्राप्त करने के लिए बहुत ही बुनियादी चीजों का उपयोग करता है।

<a align="center" href="#"><span>kannada</span></a> 

सीएसएस:

span { 
    font-size:12px; 
} 
a { 
    color:green; 
} 
a:hover span { 
    display:none; 
} 
a:hover:before { 
    color:red; 
    font-size:24px; 
    content:"ಕನ್ನಡ"; 
} 

Answer 5

किसी मेनू लिंक पर एक ही कोशिश करना चाहता है, (हॉवर पर अलग भाषा पाठ) यहाँ jsfiddle example

एचटीएमएल है ऐसा करने का तरीका, बटन के साथ दो स्पैन बनाना है, और प्रत्येक अवधि के लिए कक्षाएं हैं।

<button> 
    <span class="replies">3 Replies</span> 
    <span class="comments"></span> 
<button> 

दूसरा एक खाली रहने दें, और सीएसएस में, लिखें:

button{ 
    //your decorative code here } 

button:hover .replies{ 
    display: none; } 

button:hover .comments:before{ 
    content:"Reply!"; } 

यह पहला जवाब देने के लिए समान है, लेकिन है कि इसका जवाब हमेशा एस.ए.एस.एस., या उससे कम की तरह एक पूर्वप्रक्रमक के साथ काम नहीं करता।

Answer 6

एक और

Answer 7

के रूप में सरल रूप में यह हो सकता है:

$('.controls button.filter').hover(function(){ 

    var original = $('#current_filter').text(); 
    var descr = $(this).attr("title"); 

    $('#current_filter').html(descr); 

}, function() { 

    $('#current_filter').text(original); 
});