Javascript 隐藏悬停jQuery

我正在使用javascript在悬停时显示/隐藏div中的文本

有4个div块具有相同的类-

。main\u content

每个块都有一个链接和文本。默认情况下，文本是隐藏的

当光标位于

.main\u content

上时，只应显示此块的文本。为什么

悬停

功能不切换文本

$（文档）.ready（函数（）{
函数hover（）{
var IndexItem=getElementsByClassName（“主要内容”）；
if（IndexItem.hover（））{
index=IndexItem.index（）；
IndexItem:eq（index）.toggle（）；
};
};;
})

@font-face{
字体系列：“SevillaDecor”；
/* Гарнитура шрифта */
src:url（/SevillaDecor.ttf）；
/* Путь к файлу со шрифтом */
}
* {
保证金：0；
填充：0；
}
身体{
字体系列：“SevillaDecor”，常规；
字体变体：小大写字母；
字号：600；
/*字体风格：斜体*/
}
a{
显示：块；
位置：相对位置；
身高：100%；
宽度：100%；
文字装饰：无；
颜色：#0af5ec；
}
.包装纸{
位置：绝对位置；
/*顶部：0px*/
/*左：0px*/
/*明确：两者皆有*/
宽度：100%；
身高：100%；
/*溢出：隐藏*/
}
.文本{
/*显示：块*/
位置：绝对位置；
排名：0；
身高：100%；
宽度：100%；
}
.主要内容{
字体大小：30磅；
/*位置：相对位置*/
浮动：左；
宽度：50%；
身高：50%；
/*保证金：0*/
/*填充：0*/
溢出：隐藏；
/*背景尺寸：封面*/
/*文本对齐：居中！重要*/
}
.主要内容img{
/*位置：绝对位置*/
/*最小宽度：50%*/
/*最大宽度：100%*/
/*背景尺寸：封面*/
宽度：100%；
身高：100%；
}
＊布劳克中心{
/*显示：无*/
位置：绝对位置；
宽度：185磅；
高度：185磅；
/*字体大小：15磅*/
最高：50%；
左：50%；
保证金：-95磅；
溢出：隐藏；
/*背景尺寸：包含*/
/*文本对齐：居中！重要*/
}
.block_中心img{
宽度：100%；
身高：100%；
}
.block_中心p{
显示：块；
位置：相对位置；
文本对齐：居中；
字体大小：20px；
利润率最高：5%；
利润底部：4%；
}
/*
.main_内容：：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
}
.main：：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
}
*/

这实际上非常简单

有两种快速方法可以做到这一点。最简单的方法是使用CSS

：hover

伪选择器，如下所示：

.text {
    display:none;
}
.main_content:hover .text {
    display: block;
}

$('.main-content').mouseenter(function(){
    $(this).find('.text').fadeIn();
});

$('.main-content').mouseleave(function(){
    $(this).find('.text').fadeOut();
})

或者使用JavaScript，在

$（this）

选择器上使用

find（）

语句，如下所示：

.text {
    display:none;
}
.main_content:hover .text {
    display: block;
}

$('.main-content').mouseenter(function(){
    $(this).find('.text').fadeIn();
});

$('.main-content').mouseleave(function(){
    $(this).find('.text').fadeOut();
})

纯CSS：

.main_content > a > .text {
    display: none;
}

.main_content:hover > a > .text {
    display: block;
}

---

给你答案

$（文档）.ready（函数（）{
$（'.main_content'）。悬停（函数（）{
$（this.find（'div.text'）.toggle（）；
});  
});
@font-face{
字体系列：“SevillaDecor”/*Гаааааааа*/
src:url（/SevillaDecor.ttf）；/**/
}
* {
保证金：0；
填充：0；
}
身体{
字体系列：“SevillaDecor”，常规；
字体变体：小大写字母；
字号：600；
/*字体风格：斜体*/
}
a{
显示：块；
位置：相对位置；
身高：100%；
宽度：100%；
文字装饰：无；
颜色：#0af5ec；
}
.包装纸{
位置：绝对位置；
/*顶部：0px*/
/*左：0px*/
/*明确：两者皆有*/
宽度：100%；
身高：100%；
/*溢出：隐藏*/
}
.文本{
/*显示：块*/
位置：绝对位置；
显示：无；
排名：0；
身高：100%；
宽度：100%；
}
.主要内容{
字体大小：30磅；
/*位置：相对位置*/
浮动：左；
宽度：50%；
身高：50%；
/*保证金：0*/
/*填充：0*/
溢出：隐藏；
/*背景尺寸：封面*/
/*文本对齐：居中！重要*/
}
.主要内容img{
/*位置：绝对位置*/
/*最小宽度：50%*/
/*最大宽度：100%*/
/*背景尺寸：封面*/
宽度：100%；
身高：100%；
}
＊布劳克中心{
/*显示：无*/
位置：绝对位置；
宽度：185磅；
高度：185磅；
/*字体大小：15磅*/
最高：50%；
左：50%；
保证金：-95磅；
溢出：隐藏；
/*背景尺寸：包含*/
/*文本对齐：居中！重要*/
}
.block_中心img{
宽度：100%；
身高：100%；
}
.block_中心p{
显示：块；
位置：相对位置；
文本对齐：居中；
字体大小：20px；
利润率最高：5%；
利润底部：4%；
}
/*
.main_内容：：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
}
.main：：之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
}
*/
此效果可以在CSS中实现：

.main_content img {
  opacity:1;
}
.main_content .text {
  opacity:0;
}
.main_content .text,
.main_content img {
  transition:opacity 0.6s linear;
}
.main_content:hover img {
  opacity: 0;
}
.main_content:hover .text {
  opacity: 1;
 }

当您将鼠标悬停在容器上时，img淡出，文本淡入，以便

只应显示此块的文本


@font-face{
字体系列：“SevillaDecor”；
/* Гарнитура шрифта */
src:url（/SevillaDecor.ttf）；
/* Путь к файлу со шрифтом */
}
* {
保证金：0；
填充：0；
}
身体{
字体系列：“SevillaDecor”，常规；
字体变体：小大写字母；
字号：600；
/*字体风格：斜体*/
}
a{
显示：块；
位置：相对位置；
身高：100%；
宽度：100%；
文字装饰：无；
颜色：#0af5ec；
}
.包装纸{
位置：绝对位置；
/*顶部：0px*/
/*左：0px*/
/*明确：两者皆有*/
宽度：100%；
身高：100%；
/*溢出：隐藏*/
}
.文本{
/*显示：块*/
位置：绝对位置；
排名：0；
身高：100%；
宽度：100%；
}
.主要内容{
字体大小：30磅；
/*位置：相对位置*/
浮动：左；
宽度：50%；
身高：50%；
/*保证金：0*/
/*填充：0*/
溢出：隐藏；
/*背景尺寸：封面*/
/*文本对齐：居中！重要*/
}
.主要内容img{
/*