如何在鼠标悬停时创建跨度内容？答案

【问题标题】：How to create span content on mouse hover?如何在鼠标悬停时创建跨度内容？
【发布时间】：2014-10-03 12:39:54
【问题描述】：

我想要一个带有内容的滑块。但内容应该只在鼠标悬停时出现。这是我正在使用的代码：

<div id="slideshow" style="width:560px; background:#999;">
    <div id="slidesContainer">            
      <div class="slide">
        <img src="js/1.jpg" />
        <div> some text </div>
      </div>        
      <div class="slide">
        <img src="js/2.jpg" />       
      <div> some text </div>  
    </div>        
      <div class="slide">
        <img src="js/3.jpg" />
      <div> some text </div>
      </div>        
      <div class="slide">
        <img src="js/4.jpg" />
      <div> some text </div>
      </div>        
    </div>
  </div>

jquery 1.8.3 库和这段代码

$(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 560;
      var slides = $('.slide');
      var numberOfSlides = slides.length;

      // Remove scrollbar in JS
      $('#slidesContainer').css('overflow', 'hidden');

      // Wrap all .slides with #slideInner div
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth
        });

      // Set #slideInner width equal to total width of all slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);


      // Hide left arrow control on first load
      manageControls(currentPosition);



      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls(position){
                if(position >= 4)
                {
                    position=0;
                    currentPosition=0;
                }
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
      } 

      function Aplay(){
        // Determine new position
        currentPosition =  currentPosition+1 ;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
          setTimeout(function(){Aplay();},2000);
      }
      setTimeout(Aplay(),20000);

});

现在<div> some text </div> 应该只在鼠标悬停时出现，例如：http://www.backslash.gr/demos/contenthover-jquery-plugin/#demo4

【问题讨论】：

“但内容应该只在鼠标悬停时出现” - 然后最初隐藏它，然后只显示它悬停时（而不是悬停时的动态创建）。

标签： javascript jquery html css

【解决方案1】：

这很简单，我认为这是最快的解决方案，因为它需要的 jquery 比其他的少（= 保持你的代码干净）

将以下类添加到每个包含描述的div：class="slide-desc" 到您的 HTML
将var slideDesc = $('.slide-desc');添加到您的JS，这只是为了适合您编写jQuery的方式，和 slideDesc.hide();（或$('.slide-desc').hide;，以使用更快的方式代替）。这条语句（最好在你的JS的第一行调用.hide()方法，避免页面加载时描述闪烁。把它放在你声明的变量之后。

在 JS 的某处添加这些行：

$('#slidesContainer').hover(function(){
     slideDesc.show();
  });

你已经完成了！ :D

【讨论】：

顺便说一句，我喜欢你的头像 :)

【解决方案2】：

CSS

<style type="text/css">
  .title {visibility:hidden;}
</style>

HTML 将 title 类添加到所有需要的 DIV 元素

<div class="title"> some text </div>

将此添加到您的脚本中

$('#slideInner').mouseover(function() {
    $('#slideInner .title').css('visibility', 'visible');
});

$('#slideInner').mouseout(function() {
    $('#slideInner .title').css('visibility', 'hidden');
});

工作jsBin

【讨论】：

它在 jsbin 中工作，但是当我在 html 中应用时它不工作.. 仅对于第一张图像，当鼠标悬停时只有 Text1 出现
@user3419304 好吧，这里一切正常。您是否已将 class="title" 添加到所有需要的 DIV 中？不然建个jsBin我查一下，没问题

【解决方案3】：

一个简单的解决方案是像这样设置你的“幻灯片”div：

<div class="slide" onMouseOver="$('#TEXT1').css('display','block')" onMouseOut="$('#TEXT1').css('display','none')">
  <img src="js/1.jpg" />
  <div id="TEXT1" style="display:none;"> some text </div>
</div>

【讨论】：