如何使用溢出隐藏和位置绝对？

Question

当我制作 .slider-时，我希望 descriptionClass 显示在 itemClass 上imgClass 是悬停 .......................
如何使用 Jquery或javascritp或CSS ..............

HTML

   <div id="carousel-example-generic">
      <div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
        <div class="carousel-inner">
            <div class="item active">
                <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                    <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
                  <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                     <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
          </div>
          <div class="item ">
                <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                    <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
          </div>
           <div class="item ">
              <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                    <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                   <div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
          </div>
        </div>
         <a data-slide="prev" href="#carousel-example-captions" class="left carousel-control"> 
          left
         </a> 
         <a data-slide="next" href="#carousel-example-captions" class="right carousel-control"> 
          right
         </a> 

      </div>

CSS

.descriptoion{
   border: 1px solid red;
   bottom: 0;
   color: red;
   height: 250px;
   line-height: 40px;
   position: absolute;
   right: -222px;
   width: 200px;
   word-wrap: break-word;
   z-index: 1000;
   background-color:#f0f0f0;
   display:none;
   font-size:20pt;
   text-align:center;
  }
.descriptoion:before{
    position:absolute;
    content:"";
    border:20px solid transparent;
    border-right:20px solid #f0f0f0;
    top:50%;
    left:-42px;
    z-index:1000;
  }
 .descriptoion:after{
    border:22px solid transparent;
    border-right:22px solid red;
    z-index:10001;
    content: "";
    left: -46px;
    position: absolute;
    top: 49%;
    z-index: 1;
 }
.slider-img:hover .descriptoion{
    display:block;
}

jquery的

   $(".slider-img").hover(function(){
      $(this).parent().parent().addClass('not-overflow');
   });
   $(".carousel > a").click(function(){
      $(".carousel-inner").removeClass("not-overflow");
  });

我有这个问题     

我想要这种风格

UPDATEDEMO

Answer 1

基本上，您必须从overflow:hidden以及.item-active中删除.carousel-inner属性。 如果您看到循环图像突破div，请限制该图像的大小。

此外，您似乎在css文件中有重复的类。

DEMO FIDDLE