Question

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

<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 lib和这段代码

$(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

Answer 1

一个简单的解决方案是设置这样的'slide'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>

Answer 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

Answer 3

这很容易，我认为这是最快的解决方案，因为需要的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

如何在鼠标悬停上创建跨度内容？

3 个答案: