Question

我有一个简单的HTML页面，其中每个图像都有描述，我希望您将鼠标悬停在特定图像上必须显示特定描述。 CSS的类描述已设置可见性：隐藏;

我已经证明但是我的悬停时我的jquery函数没有设置类可见性：visible; 我不知道jquery中的确切语法，用于在可见性中设置span元素的类：可见;

<div id="FiltriMusica2">                            
  <p idsapore="1" class="sapore"><img alt="caffe.png" src="/caffe.png">
    <span class="descrizionesap">Adrenalina</span>
  </p>      
  <p idsapore="2" class="sapore"><img alt="peperoncino.png" src="/peperoncino.png">
    <span class="descrizionesap" >Peperoncino</span>            
  </p>                          
</div>

CSS

.descrizionesap {
    visibility:hidden;
}

javascript

jQuery(".sapore").hover(function() {
    jQuery(this).children().find('.descrizionesap').css("visibility","visible");            
}, function() {                             
    jQuery(".descrizionesap").css("visibility","hidden");
});

Answer 1

CSS足以完成此任务

.descrizionesap {
  visibility:hidden;
}   

/* if you want to show the span on image hover */
img:hover + .descrizionesap {
  visibility: visible;
}   

/* if you want to show the span on paragraph hover */
.sapore:hover .descrizionesap {
  visibility: visible;
}

两个示例也适用于IE7（在IE6上：hover伪类仅适用于链接元素。）

作为附注，如果您需要验证标记，请考虑将属性idsapore更改为data-id-sapore

Answer 2

与其他答案状态一样，您只需要CSS即可。但是，您可以在jQuery中执行此操作：使用display:block和display:none。

CSS

.descrizionesap {
    display: none;
}

现在在jQuery中，你可以这样做：

$('.sapore').hover(function() {
    $(this).find('.descrizionesap').css('display', 'block');
}, function() {
    $(this).find('.descrizionesap').css('display', 'none');
});

Jquery如何在悬停图像上更改span元素的可见性

2 个答案: