使用 jquery 在 img 上懸停文本
[英]text over img hover with jquery
問題描述
我是一個完整的編碼初學者，我已經在這里搜索過，但我無法真正找到解決我問題的正確方法。
當我用鼠標懸停在圖像上時，我試圖讓文本代替圖像出現。 不幸的是必須使用 jQuery，我知道它可以通過使用 CSS 來完成。
到目前為止，我在這里找到了以下內容：
在頭部：
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
在體內：
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS：
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
感謝您提供有關我做錯了什么以及如何解決該問題的簡單提示或解釋。
編輯：
這是我的 PHP 文件中的完整代碼：
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
然后它繼續下拉菜單路由到其他頁面。 CSS 代碼在我上面鏈接的 CSS 文件中（鏈接是正確的，因為所有其他 CSS 代碼都在工作）。
3 個解決方案
解決方案1
0 2017-06-07 20:02:27
你必須定義overly的大小 - 我用下面的位置設置來做到這一點。 另外，我刪除了不透明度設置。 不確定您還想要什么，但現在基本上可以使用了。
$(document).ready(function() { $('.parent').mouseenter(function() { $(this).children('.child').fadeIn(); }).mouseleave(function() { $(this).children('.child').fadeOut(); }); });
.parent { position: relative; } .child { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: black; padding: 10px; display: none; } .child p { color: white; text-align: center; margin-top: 100px; font-size: 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='parent'> <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' /> <div class='child'> <p>Random text.</p> </div> </div>
解決方案2
0 已采納 2017-06-07 20:09:49
$(document).ready(function() { $('.gallery-item').hover(function() { $(this).find('.img-title').fadeIn(300); }, function() { $(this).find('.img-title').fadeOut(100); }); });
.gallery { width: 25em; margin: 2em auto; } .gallery-item { height: auto; width: 48.618784527%; float: left; margin-bottom: 2em; position: relative; } .gallery-item:first-child { margin-right: 2.762430939%; } .gallery-item img { width: 100%; } .gallery-item:hover .img-title {} .img-title { position: absolute; top: 0; margin: 0; height: 100%; width: 100%; text-align: center; display: none; background-color: #333; } .img-title h5 { position: absolute; color: #fff; top: 33%; width: 100%; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper clearfix"> <figure class="gallery-item"> <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'> <figcaption class="img-title"> <h5>Random text.</h5> </figcaption> </figure> </div>
解決方案3
0 2017-06-07 20:10:10
希望能幫到你。
$(function(){ $('.parent').mouseenter(function(){ //alert(); $(this).children('.child').show().fadeIn(200);//have some timeout for fading in }).mouseleave(function(){ $(this).children('.child').fadeOut(400); }); });
.parent { position:relative; } .child { position: absolute; left: 0; bottom: 0; background-color: black; opacity: 1.0; padding:10px; display:none; /* add width and height attribute to the elem */ width:100%; height:300px; color:white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='parent'> <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/> <div class='child'> <p>Random text.</p> </div> </div>
將鼠標懸停在文本jQuery上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.