Javascript 将鼠标悬停在另一个单独的div上时显示div

我在网上搜索过，发现了与我自己类似的问题，但我没有得到我想要的结果。我不是最精通html/css/和javascript/jquery的人，所以我想知道这是否是我在格式化所有内容时的错误，或者是我试图编写这些结果的路径

我有三个圆圈，在页面中央等距排列。每个圆圈链接到不同的页面。将鼠标悬停在圆上时，会显示一个范围（通过更改css中的“不透明度”属性），该范围为链接的位置提供标题

我遇到的问题是：当你在每个圆圈上悬停时，除了显示一个提供标题的跨度之外，我希望在圆圈下面显示一个简短的描述性文本。当您将鼠标移出该圆圈时，描述性文本将消失。每个圆必须有自己的描述符文本

从我收集的信息来看，jquery hover on事件可能是实现这一点的最佳方法，但是我似乎无法获得正确的语法使其工作

<script>
jQuery(document).ready(function() {
jQuery('#text1').hide();
});
jQuery(document).ready(function() {
jQuery('.grid_1').hover(function() {
jQuery(this).find('#text1').show();
},
function() {
jQuery('#text1').hide();
});
});
</script>

jQuery（文档）.ready（函数（）{
jQuery（'#text1'）.hide（）；
});
jQuery（文档）.ready（函数（）{
jQuery（'.grid_1'）。悬停（函数（）{
jQuery（this.find（'#text1'）.show（）；
},
函数（）{
jQuery（'#text1'）.hide（）；
});
});

我们将非常感谢您的任何帮助。如果我需要澄清什么，请告诉我

---

您的jquery引用了

#text1

，它应该是

.text1

，因为该元素是一个类。还有

$（this.find（'.text'）.show（）不起作用，因为
.text
不是您悬停的对象的子对象（
$（this）
）。只需使用
$（'.text1'）


$（文档）.ready（函数（）{
$（'.text1'）.hide（）；
});
$（文档）.ready（函数（）{
$（'.grid_1'）。悬停（函数（）{
$（'.text1'）.show（）；
},
函数（）{
$（'.text1'）.hide（）；
});
});
.gridcontainer{
宽度：720px；
保证金：30像素自动；
}
.grid_1{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.grid_2{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.grid_3{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.把你圈出来{
宽度：200px；
高度：200px；
文本对齐：居中；
显示：块；
左边距：10px；
不透明度：0.75；
边界半径：100px；
边框：实心2.5px#8d8b；
-moz边界半径：100px；
-webkit边界半径：100px；
-o-边界半径：100px；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu退出：悬停{
不透明度：1；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu在{
宽度：170px；
高度：170px；
利润率：15px；
显示：内联块；
溢出：隐藏；
边界半径：85px；
-moz边界半径：85px；
-webkit边界半径：85px；
-o-边界半径：85px；
}
.fmu在img中{
边界：无；
利润率：30px25px25px25px；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu在跨度内{
填充：0；
边界：0；
垂直对齐：基线；
宽度：160px；
背景：#fff；
颜色：#666666；
填充物：5px；
利润率：70像素0；
高度：20px；
文本对齐：居中；
字体大小：粗体；
字母间距：0.08em；
文本转换：大写；
位置：绝对位置；
不透明度：0；
边界半径：2px；
-moz边界半径：2px；
-webkit边界半径：2px；
-o-边界半径：2px；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmcircle_out：悬停。fmcircle_在范围内{
不透明度：1；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu退出：焦点{
不透明度：1；
}
.FMU蓝{
背景色：#35C317；
}
.FMU红色{
背景色：#BA282B；
}
.FMU绿色{
背景色：#2E70DC；
}

文本框1

文本框2

文本框3

我将提供一个css解决方案，因为存在jquery答案

将以下内容添加到css中

.fmcircle_out:hover .description{
    opacity:1;
  }
  .description{
    opacity:0;
    transition:opacity 1s;
  }
  .fmcircle_out a{
    text-decoration:none;
  }
.fmcircle_out:focus {
    opacity: 1;
}

请参阅代码段（注意，如果愿意，可以将这些规则添加到已声明的现有规则中）


.gridcontainer{
宽度：720px；
保证金：30像素自动；
}
.grid_1{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.grid_2{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.grid_3{
显示：内联；
浮动：左；
左边距：10px；
右边距：10px；
宽度：220px；
}
.把你圈出来{
宽度：200px；
高度：200px；
文本对齐：居中；
显示：块；
左边距：10px；
不透明度：0.75；
边界半径：100px；
边框：实心2.5px#8d8b；
-moz边界半径：100px；
-webkit边界半径：100px；
-o-边界半径：100px；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu退出：悬停{
不透明度：1；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-ms转换：所有0.2s线性；
过渡：所有0.2s线性；
}
.fmu在{
宽度：170px；
高度：170px；
利润率：15px；
显示器：i
<script>
 $(document).ready(function(){
  $('.grid_1').hover(     
   function () {
  $('#text1').hide();
 }, 

 function () {
   $('#text1').show();
  }
   );
  });