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

时间:2014-08-10 16:09:38

标签: javascript jquery html css

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

<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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

答案 2 :(得分:1)

这很容易,我认为这是最快的解决方案,因为需要的jquery比其他的少(=保持代码干净)

  1. 将以下类添加到包含说明的每个divclass="slide-desc"到您的HTML

  2. var slideDesc = $('.slide-desc');添加到您的JS中,这只是为了符合您编写jQuery的方式, slideDesc.hide();(或$('.slide-desc').hide;,以便使用更快的方式)。这个语句(最好在JS的第一行调用.hide()方法,以避免在加载页面时闪烁描述。在你声明变量之后立即放置。

  3. 在JS中添加以下几行:
    $('#slidesContainer').hover(function(){
         slideDesc.show();
      });
  4. 你做完了!的:d