सरल रोलओवर/होवर तकनीक

Question

मुझे यह जानकर उत्सुकता है कि मूल रोल-ओवर एक्शन- JQuery या CSS के बारे में जाने का सबसे अच्छा तरीका क्या है?

• सामान्य::

  मैं एक रोल-ओवर इन राज्यों के साथ चाहते हैं पाठ के पैराग्राफ एक DIV भीतर

• होवर: पाठ के पैराग्राफ बाहर हो जाते हैं, एक तस्वीर पाठ
के रूप में fades, एक ही स्थिति में
• onmouseout: फोटोग्राफ फ़ेड आउट, पाठ में वापस fades

DIV & फोटोग्राफ दोनों में जाना जाता है आकार रहे हैं।।

सीएसएस-केवल रोल-ओवर प्रभावों का 9 0% मुझे ऑनलाइन मिला है विशेष रूप से मेनू के लिए, sprites का उपयोग कर, जो मैं बाद में नहीं हूं, और अन्य 10% इस बारे में चिंतित हैं कि: होवर अच्छा है अभ्यास।

मुझे उत्सुकता है कि लोग क्या सोचते हैं कि इन दिनों सबसे सरल तकनीक है - कम से कम कोड, कम से कम जटिलता, सबसे संगत।

रोल ओवर के बिना अभी तक नहीं जोड़ा, एचटीएमएल इस के समान है:

<div id="box1"> 
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p> 
</div> 

सीएसएस है:

#box1 { 
    width:403px; 
    height:404px; 
    background-image:url('../images/bio_square1.jpg'); 
    background-repeat:no-repeat; 
    color:#fff; 
} 

Answer 1

जैसा कि अन्य ने कहा है, क्रॉस-ब्राउज़र संगतता के लिए jQuery जाने का तरीका है। लेकिन यदि आप केवल सीएसएस चाहते हैं तो संक्रमण का उपयोग करके एक त्वरित और गंदे CSS3 विकल्प है: http://jsfiddle.net/wkhQA/2/

संपादित करें: आलस्य के कारण, मैंने केवल संक्रमण के लिए वेबकिट उपसर्ग शामिल किया। तो मुझे लगता है कि क्रोम या सफारी में इसका परीक्षण करें। क्षमा याचना।

Answer 2

क्रॉस-ब्राउज़र संगतता के लिए, jQuery जाने का रास्ता हो जाएगा। इसके अलावा, जो आप चाहते हैं वह होवर पर शैलियों को बदलने से थोड़ा अधिक जटिल लगता है। उदाहरण के लिए, आप पैराग्राफ में फीका के अंत तक तस्वीर के फीका को बाध्य कर रहे हैं। शुद्ध सीएसएस में इसे पूरा करने का कोई तरीका नहीं है।

Answer 3

यदि तत्व में फीका/आउट करने की आवश्यकता होती है तो मैं आमतौर पर jquery का सहारा लेता हूं। कि मेरी सीएसएस की तरह कुछ जाना होगा के बाद

<div id="box"> 

    <div class="box-img"> 

     <img src="image.jpg"/> 

    </div> 

    <div class="box-text"> 

     Lorem ipsum 

    </div> 

</div> 

:

मेरे एचटीएमएल कुछ इस तरह होगा

#box{ 
    width:500px; 
    height:500px; 
    padding:0; 
} 

    .box-img{ 
     position:absolute; 
     opacity:0; 
    } 

    .box-text{ 
     position:absolute; 
    } 

और बंद समाप्त करने के लिए, मैं शायद .mouseover के लिए jQuery पुस्तकालय का उपयोग करेगा() या। होवर():

$("#box").hover(
    function() { 
    $(".box-img").fadeTo("100,1"); 
    $(".box-text").fadeTo("100,0"); 
    }, 
    function() { 
    $(".box-img").fadeTo("100,0"); 
    $(".box-text").fadeTo("100,1"); 
    } 
); 

यह इष्टतम विधि नहीं हो सकता है लेकिन मुझे लगता है कि पीछे कोई विचार नहीं है कहीं भी क्या संभव है।

आप jQuery API पर कार्रवाई में .hover() देख सकते हैं। डेमो में आपके जैसा कुछ भी दिख रहा है उसके समान कुछ का एक जीवंत उदाहरण है और यह एक और तरीका नियोजित कर रहा है।

आशा है कि इससे मदद मिलती है! =)