![](/img/trans.png)
[英]jQuery: Buttons with a larger picture when user is hovering over it?
[英]Jquery: Displaying picture and text when hovering over an <a> tag
我目前正在使用jquery和<a>
标记。 现在,每次将鼠标悬停在标签上时,我都可以显示图像。 我正在努力在与正确的<a>
标记相对应的图片下方实际显示文本的部分工作。 鼠标悬停时如何在每张图片下方显示相应的<legend>
? 一次显示一个图例以及匹配的图片。 这是我的例子
代码jQuery
<script>
$(document).ready(function () {
var $images = $("div#images");
var $currentImage = $images.children("img#cheeseburger");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
});
</script>
的HTML
<div id="links">
<h2> Select A Category </h2>
<a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
<a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
<a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
</div>
<center>
<br />
<div id="images">
<img src="images/cheeseburger.jpg" id="cheeseburger">
<img src="images/tacos.jpg" id="tacos">
<img src="images/salad.jpg" id="salads" >
</div>
</center>
<fieldset class="el05">
<legend style="font-size:15px;"><b>Cheeseburger:</b></legend>
<p> Example one</p>
</fieldset>
<fieldset class="el05">
<legend style="font-size:15px;"><b>Tacos:</b></legend>
<p> Example two.</p>
</fieldset>
<fieldset class="el05">
<legend style="font-size:15px;"><b>Salad:</b></legend>
<p> Example three.</p>
</fieldset>
尝试这样的事情我刚刚实现
<fieldset class="cheeseburger">
<legend style="font-size:15px;"><b>Cheeseburger:</b></legend>
<p> Example one</p>
</fieldset>
<script>
$(document).ready(function () {
var $images = $("div#images");
var $currentfieldset = $(".cheeseburger");
var $currentImage = $images.children("img#cheeseburger");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
var $fieldset = $('.' + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
if (!$fieldset .is($currentfieldset)) {
$currentfieldset.hide();
}
$currentImage = $image;
$fieldset.show();
$currentfieldset= $fieldset ;
$image.stop(true, true).fadeIn("slow");
});
});
</script>
请尝试以下方法:
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var $images = $("div#images");
var $currentfieldset = $(".cheeseburger");
var $currentImage = $images.children("img#cheeseburger");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
var $fieldset = $('.' + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
if (!$fieldset .is($currentfieldset)) {
$currentfieldset.hide();
}
$currentImage = $image;
$currentfieldset= $fieldset ;
$image.stop(true, true).fadeIn("slow");
$currentfieldset.stop(true,true).fadeIn("slow") ;
});
});
</script>
的HTML
<div id="links">
<h2> Select A Category </h2>
<a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
<a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
<a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
</div>
<center>
<br />
<div id="images">
<img src="images/cheeseburger.jpg" id="cheeseburger">
<img src="images/tacos.jpg" id="tacos">
<img src="images/salad.jpg" id="salads" >
</div>
</center>
<fieldset class="el05 cheeseburger">
<legend style="font-size:15px;"><b>Cheeseburger:</b></legend>
<p> Example one</p>
</fieldset>
<fieldset class="el05 tacos" style="display:none;">
<legend style="font-size:15px;"><b>Tacos:</b></legend>
<p> Example two.</p>
</fieldset>
<fieldset class="el05 salads" style="display:none;">
<legend style="font-size:15px;"><b>Salad:</b></legend>
<p> Example three.</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.