Javascript Jquery：将鼠标悬停在<；上时显示图片和文本；a>；标签

我目前正在使用jquery和

代码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>


$（文档）.ready（函数（）{
var$images=$（“div#images”）；
var$currentImage=$images.children（“img#cheeseburger”）；
$currentImage.show（）；
$（“div#links>a”）.mouseenter（函数（）{
var ID=$（this.data（“内容”）；
var$image=$images.children（“img#”+ID）；
如果（！$image.is（$currentImage））{
$currentImage.hide（）；
}
$currentImage=$image；
$image.stop（真，真）.fadeIn（“慢”）；
});
});

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>


芝士汉堡：
例一

$（文档）.ready（函数（）{
var$images=$（“div#images”）；
变量$currentfieldset=$（“.cheeseburger”）；
var$currentImage=$images.children（“img#cheeseburger”）；
$currentImage.show（）；
$（“div#links>a”）.mouseenter（函数（）{
var ID=$（this.data（“内容”）；
var$image=$images.children（“img#”+ID）；
变量$fieldset=$（'.'+ID）；
如果（！$image.is（$currentImage））{
$currentImage.hide（）；
}
如果（！$fieldset.is（$currentfieldset））{
$currentfieldset.hide（）；
}
$currentImage=$image；
$fieldset.show（）；
$currentfieldset=$fieldset；
$image.stop（真，真）.fadeIn（“慢”）；
});
});
请尝试以下操作：

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>


$（文档）.ready（函数（）{
var$images=$（“div#images”）；
变量$currentfieldset=$（“.cheeseburger”）；
var$currentImage=$images.children（“img#cheeseburger”）；
$currentImage.show（）；
$（“div#links>a”）.mouseenter（函数（）{
var ID=$（this.data（“内容”）；
var$image=$images.children（“img#”+ID）；
变量$fieldset=$（'.'+ID）；
如果（！$image.is（$currentImage））{
$currentImage.hide（）；
}
如果（！$fieldset.is（$currentfieldset））{
$currentfieldset.hide（）；
}
$currentImage=$image；
$currentfieldset=$fieldset；
$image.stop（真，真）.fadeIn（“慢”）；
$currentfieldset.stop（真、真）.fadeIn（“慢”）；
});
});

HTML


选择一个类别


芝士汉堡：
例一

玉米饼：
例二

沙拉：
例三


HTML代码中有一个额外的结束div（），这是打字错误吗？和（可以选择显示带文本的图像）可能对您有帮助。请提供图例（或那些字段集）ID，然后以与图像相同的方式隐藏和显示它们。@nnnn我尝试过这样做，但不起作用。如果你能以答案的形式发布，我一定会接受的。谢谢，我做了更改，但不起作用。检查“我只更改了一个字段集”，您必须更改其他两个字段集，还可以将其类更改为受尊重的数据内容，如第一个字段集中所做的是，我现在已使用与数据匹配的相应类完成所有字段集，但这会使所有字段集消失。我只想根据图片一个一个地展示完美先生！，我知道你改变了什么。非常感谢。
<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>