पाठ?

मैं एक छवि के नीचे-बाईं ओर प्रकट करने के लिए एक छोटे से बॉक्स प्राप्त करने के लिए कोशिश कर रहा हूँ जब इस पर एक माउस चालें। बॉक्स के अंदर एक अलग पृष्ठ का एक लिंक होगा।पाठ?

Here कुछ हद तक मैं क्या चाहते करने के लिए समान है, लेकिन बॉक्स छोटा और छवि की सीमा से जुड़ा नहीं किया जाना है।

मैं सब कुछ कोशिश की है और एक जवाब नहीं मिल रहा। और मैं नहीं चाहता कि टूलटिप उपयोग करने के लिए, वास्तव में मैं कोई जावास्क्रिप्ट ज्ञान है कि चाहते हैं अकेले। मैं वास्तव में यह सीएसएस होना चाहता हूँ।

इसके अलावा, मैं पाया जा सकता है right here.

स्रोत

2013-01-04 alex r

मैं अपने जवाब – Fabio

यह CSS3 में :hover pseudoelement उपयोग कर रहा है।

HTML:

<div id="wrapper"> 
    <img src="http://placehold.it/300x200" class="hover" /> 
    <p class="text">text</p> 
</div>

सीएसएस:

#wrapper .text { 
position:relative; 
bottom:30px; 
left:0px; 
visibility:hidden; 
} 

#wrapper:hover .text { 
visibility:visible; 
}

डेमो HERE।

एचटीएमएल:

<div id="wrapper"> 
    <img src="http://placehold.it/300x200" class="hover" /> 
    <p class="text">text</p> 
</div>

सीएसएस:

#wrapper p { 
position:relative; 
bottom:30px; 
left:0px; 
visibility:hidden; 
}

jqu

यह बजाय jQuery का उपयोग करके एक ही परिणाम प्राप्त करने का एक तरीका है ery कोड:
:

$('.hover').mouseover(function() { 
    $('.text').css("visibility","visible"); 
}); 

$('.hover').mouseout(function() { 
    $('.text').css("visibility","hidden"); 
});

आप HTML पृष्ठ के शरीर में, jQuery कोड जहाँ आप चाहते डाल सकते हैं, तो आप इस तरह सिर में jQuery पुस्तकालय शामिल करने की ज़रूरत

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</head>

आप डेमो HERE देख सकते हैं।

आप अपनी वेबसाइट पर इसका इस्तेमाल करने के लिए, बस <img src /> मूल्य बदल सकते हैं और आप एक से अधिक छवियों और कैप्शन जोड़ सकते हैं, बस प्रारूप मैं इस्तेमाल किया कॉपी चाहते हों: साथ class="text"

स्रोत

2013-01-04 00:47:27 Fabio

धन्यवाद फैबियो, यह भी काम करता है, लेकिन दूसरा आसान है। जब मैं जावास्क्रिप्ट के साथ खेलना शुरू करता हूं तो मैं इसे देखता हूं :) –

आपका स्वागत है :) जावास्क्रिप्ट जावा के समान है जैसा कि आप नाम से अनुमान लगा सकते हैं, लेकिन सरल। यदि आप इसे सीखना चाहते हैं तो मैं आपको उस पाठ्यक्रम की सलाह देता हूं जिसे आप codecademy.com पर पा सकते हैं। यह एक उबाऊ नहीं है, सीखने के दौरान आपको कोड करना होगा। Jquery के अलावा एक जावास्क्रिप्ट ढांचा है जो आपको शुद्ध जावास्क्रिप्ट का उपयोग करने से शक्तिशाली चीजों को एक आसान तरीके से कोड करने देता है। आधिकारिक दस्तावेज अच्छी तरह से किया जाता है :) @alexr – Fabio

यहाँ के साथ काम करने की कोशिश कर रहा हूँ छवियों एक तरह से इस सीएसएस का उपयोग कर करना है

एचटीएमएल

<div class="imageWrapper"> 
    <img src="http://lorempixel.com/300/300/" alt="" /> 
    <a href="http://google.com" class="cornerLink">Link</a> 
</div>

सीएसएस

.imageWrapper { 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 
.imageWrapper img { 
    display: block; 
} 
.imageWrapper .cornerLink { 
    opacity: 0; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    padding: 2px 0px; 
    color: #ffffff; 
    background: #000000; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 

} 
.imageWrapper:hover .cornerLink { 
    opacity: 0.8; 
}

Demo

या फिर आप नीचे बाएँ कोने में यह चाहते हैं:

Demo

स्रोत

2013-01-04 00:37:20 3dgoo

इस काम करता है संपादित लेकिन यह अस्पष्टता – Fabio

आप कर सकते हैं का उपयोग कर एक चाल है यदि आप चाहें तो अस्पष्टता के बजाय 'डिस्प्ले: ब्लॉक' और 'डिस्प्ले: none'' का उपयोग करें। हालांकि मैं अच्छा संक्रमण करना पसंद करता हूं। – 3dgoo

हाँ यह सही है। इसका एक अच्छा प्रभाव है। मुझे नहीं पता था कि आप होवर पर किसी अन्य तत्व के गुणों को बदल सकते हैं। मैंने केवल वही सोचा। – Fabio

उपयोग :hover::before pseudooclass class="hover" और पी के साथ डालने छवि

.round-pic2:hover::before{ 
    content: 'text'; 
    position: relative; 
    top: 60px; 
    left: 50px; 
    width: 30px; 
    height: 20px; 
    text-align: center; 
    display: inline-block; 
}

JSFiddle

स्रोत

2014-04-03 07:52:20 Benio

पोर्टेबिलिटी के बारे में निश्चित नहीं है, लेकिन यह निश्चित रूप से इस तरह अधिक है। आश्चर्य है कि अगर कोई व्यक्ति विश्वसनीय रूप से पाठ के बाद केंद्र :: ::/:: के माध्यम से एक रास्ता तय कर सकता है! – Lodewijk

उत्तर

संबंधित मुद्दे