Question

我有很多div's扩展了悬停。问题是，当用户在其上悬停时div展开时，div's吼叫它会陷入困境。

这就是我在div's上没有悬停时的样子：

当用户悬停时会发生这种情况：

这是html secion：

<div class="col-xs-12 col-ms-6 xs-nopadding pull-right col-ms-6 col-sm-6 col-md-4  col-lg-3 heightset prCtEx setbmarg ">
                            <div class="col-item heightset">
                                <div class="photo">
                                <a href="http://192.168.1.108/forushgah_karbalaie/pr2/%D9%85%D8%AD%D8%B5%D9%88%D9%84+%D9%85%D8%B3%D8%AA%D9%82%DB%8C%D9%81%D8%B1%D9%88%D8%B4+%D8%A2%D9%BE%D8%A7%D8%B1%D8%AA%D9%85%D8%A7%D9%86+2%D8%AE%D9%88%D8%A7%D8%A8%D9%87+%D8%B9%D8%A7%D9%84%DB%8C++%D9%81%D8%B1%D9%88%D8%B4+%D8%A2%D9%BE%D8%A7%D8%B1%D8%AA%D9%85%D8%A7%D9%86+2%D8%AE%D9%88%D8%A7%D8%A8%D9%87+%D8%B9%D8%A7%D9%84%DB%8C+%D8%A8%D9%87+%D9%87%D9%85%D8%B1%D8%A7%D9%87+%D8%B3%D9%86%D8%AF+6+%D8%AF%D8%A7%D9%86%DA%AF+%D8%A8%D8%B1%D8%A7%DB%8C+%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA+%D9%88%D8%A7%D9%85+%D9%88%D8%A7%D9%82%D8%B9+%D8%AF%D8%B1+%D8%AE%DB%8C%D8%A7%D8%A8%D8%A7%D9%86+%D8%B4%D8%B1%DB%8C%D8%B9%D9%86%DB%8C+%D8%A8%D8%B9%D8%AF+%D8%A7%D8%B2+%D8%A8%D9%84%D9%88%D8%A7%D8%B1+%DA%A9%D8%B4%D8%A7%D9%88%D8%B1%D8%B2+%D9%85%D8%AC%D8%AA%D9%85%D8%B9+%D9%85%D8%B3%DA%A9%D9%88%D9%86%DB%8C+%D8%B4%D8%B1%DB%8C%D8%B9%D8%AA%DB%8C+%D8%8C+%D8%B7%D8%A8%D9%82%D9%87+%D8%A7%D9%88%D9%84+-+%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86+%D8%AA%D8%A7%D8%B2%D9%87+%D8%B1%D9%86%DA%AF+-+%D9%86%D8%B2%D8%AF%DB%8C%DA%A9+%D8%A8%D9%87+%D9%BE%D8%A7%D8%B1%DA%A9+%D9%87%D9%85%D8%B1%D8%A7%D9%87+%D8%A8%D8%A7+%D9%BE%D8%A7%D8%B1%DA%A9%DB%8C%D9%86%DA%AF+-%D8%A7%D9%86%D8%A8%D8%A7%D8%B1%DB%8C+-%D8%A7%D8%B3%D8%A7%D9%86%D8%B3%D9%88%D8%B1-+%D8%B4%D9%88%D9%81%D8%A7%DA%98+-+%DA%A9%D9%88%D9%84%D8%B1+-+%DA%A9%D8%A7%D8%A8%DB%8C%D9%86%D8%AA+-+%D9%BE%D8%B1%D8%AF%D9%87+-+%DA%A9%D9%85%D8%AF+-+%D9%87%D9%88%D8%AF+-+%D8%AD%D9%84%D9%87+%D8%AE%D8%B4%DA%A9+%DA%A9%D9%86+%D8%B4%DB%8C%D8%B4" title="محصول مستقیفروش آپارتمان 2خوابه عالی  فروش آپارتمان 2خوابه عالی به همراه سند 6 دانگ برای دریافت وام واقع در خیابان شریعنی بعد از بلوار کشاورز مجتمع مسکونی شریعتی ، طبقه اول - ساختمان تازه رنگ - نزدیک به پارک همراه با پارکینگ -انباری -اسانسور- شوفاژ - کولر - کابینت - پرده - کمد - هود - حله خشک کن شیش">


<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="http://192.168.1.108/forushgah_karbalaie//Opitures/sm31387461899640.jpg" class="img-responsive prodImg" style="max-height: 300px; width: auto !important;">
           <div class="carousel-caption" style="left: 0% !important;right: 40% !important;">

<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active" style="display: none ;">

        <img src="http://192.168.1.108/forushgah_karbalaie//badge.png" style="width: 80px;">
           <div class="carousel-caption " style="left: 0% !important;    right: 10% !important;bottom: 30% !important;font-size: 18px;">
                <br>
<b>Warning</b>:  Division by zero in <b>D:\xampp\htdocs\forushgah_karbalaie\func.php</b> on line <b>732</b><br>
<strong>۱۰۰</strong>%           </div>
        </div>
    </div>
</div>



           </div>
        </div>
    </div>
</div>
                                </a>
                                </div>
<div class="info">
<div class="separator clear-left text-center" style="margin-top: 5px;">
<div style="width: 100%;" class="text-right" dir="rtl" id="prName">
    <a href="http://192.168.1.108/forushgah_karbalaie/pr2/%D9%85%D8%AD%D8%B5%D9%88%D9%84+%D9%85%D8%B3%D8%AA%D9%82%DB%8C%D9%81%D8%B1%D9%88%D8%B4+%D8%A2%D9%BE%D8%A7%D8%B1%D8%AA%D9%85%D8%A7%D9%86+2%D8%AE%D9%88%D8%A7%D8%A8%D9%87+%D8%B9%D8%A7%D9%84%DB%8C++%D9%81%D8%B1%D9%88%D8%B4+%D8%A2%D9%BE%D8%A7%D8%B1%D8%AA%D9%85%D8%A7%D9%86+2%D8%AE%D9%88%D8%A7%D8%A8%D9%87+%D8%B9%D8%A7%D9%84%DB%8C+%D8%A8%D9%87+%D9%87%D9%85%D8%B1%D8%A7%D9%87+%D8%B3%D9%86%D8%AF+6+%D8%AF%D8%A7%D9%86%DA%AF+%D8%A8%D8%B1%D8%A7%DB%8C+%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA+%D9%88%D8%A7%D9%85+%D9%88%D8%A7%D9%82%D8%B9+%D8%AF%D8%B1+%D8%AE%DB%8C%D8%A7%D8%A8%D8%A7%D9%86+%D8%B4%D8%B1%DB%8C%D8%B9%D9%86%DB%8C+%D8%A8%D8%B9%D8%AF+%D8%A7%D8%B2+%D8%A8%D9%84%D9%88%D8%A7%D8%B1+%DA%A9%D8%B4%D8%A7%D9%88%D8%B1%D8%B2+%D9%85%D8%AC%D8%AA%D9%85%D8%B9+%D9%85%D8%B3%DA%A9%D9%88%D9%86%DB%8C+%D8%B4%D8%B1%DB%8C%D8%B9%D8%AA%DB%8C+%D8%8C+%D8%B7%D8%A8%D9%82%D9%87+%D8%A7%D9%88%D9%84+-+%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86+%D8%AA%D8%A7%D8%B2%D9%87+%D8%B1%D9%86%DA%AF+-+%D9%86%D8%B2%D8%AF%DB%8C%DA%A9+%D8%A8%D9%87+%D9%BE%D8%A7%D8%B1%DA%A9+%D9%87%D9%85%D8%B1%D8%A7%D9%87+%D8%A8%D8%A7+%D9%BE%D8%A7%D8%B1%DA%A9%DB%8C%D9%86%DA%AF+-%D8%A7%D9%86%D8%A8%D8%A7%D8%B1%DB%8C+-%D8%A7%D8%B3%D8%A7%D9%86%D8%B3%D9%88%D8%B1-+%D8%B4%D9%88%D9%81%D8%A7%DA%98+-+%DA%A9%D9%88%D9%84%D8%B1+-+%DA%A9%D8%A7%D8%A8%DB%8C%D9%86%D8%AA+-+%D9%BE%D8%B1%D8%AF%D9%87+-+%DA%A9%D9%85%D8%AF+-+%D9%87%D9%88%D8%AF+-+%D8%AD%D9%84%D9%87+%D8%AE%D8%B4%DA%A9+%DA%A9%D9%86+%D8%B4%DB%8C%D8%B4" title="محصول مستقیفروش آپارتمان 2خوابه عالی  فروش آپارتمان 2خوابه عالی به همراه سند 6 دانگ برای دریافت وام واقع در خیابان شریعنی بعد از بلوار کشاورز مجتمع مسکونی شریعتی ، طبقه اول - ساختمان تازه رنگ - نزدیک به پارک همراه با پارکینگ -انباری -اسانسور- شوفاژ - کولر - کابینت - پرده - کمد - هود - حله خشک کن شیش">
        محصول مستقیفروش آپارتمان ۲خوابه عالی  فروش آپارتمان ۲خوابه عالی به همراه سند ۶ دانگ برای دریافت وام واقع در خیابان شریعنی بعد از بلوار کشاورز مجتمع مسکونی شریعتی ، طبقه اول - ساختمان تازه رنگ - نزدیک به پارک همراه با پارکینگ -انباری -اسانسور- شوفاژ - کولر - کابینت - پرده - کمد - هود - حله خشک کن شیش    </a>
</div>
<div style="width: 100%;" class="text-right priceTag" id="prPrice" dir="rtl">
    ۱,۰۰۰&nbsp;&nbsp; تومان    </div>
<div class="prDesc">
    توصیحات محصول ویرایسشیبش شد</div>

</div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                     </div>

这是用于扩展的CSS：

.prDesc{
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    direction: rtl;
    font-size: 11px;
    line-height: 16px;
    color: #202020;
    padding-right: 8px;
    position: relative;
}

.prCtEx{
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  overflow: hidden;
  height: 100%;
}
.prCtEx .heightset:hover {
  height: auto !important;
}

当div扩展时，我怎么能阻止这个混乱。本网站提供了我想要做的实例： http://www.aliexpress.com/category/200003482/dresses.html?site=glo&g=y

段：

.prDesc {
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      direction: rtl;
      font-size: 11px;
      line-height: 16px;
      color: #202020;
      padding-right: 8px;
      position: relative;
    }
    .prCtEx {
      transition: height 0.5s;
      -webkit-transition: height 0.5s;
      overflow: hidden;
      height: 100%;
    }
    .prCtEx .heightset:hover {
      height: auto !important;
    }

<div class="col-xs-12 col-ms-6 xs-nopadding pull-right col-ms-6 col-sm-6 col-md-4  col-lg-3 heightset prCtEx setbmarg ">
  <div class="col-item heightset">
    <div class="photo">
      <a href="#" title="#">


        <div id="mycarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://192.168.1.108/forushgah_karbalaie//Opitures/sm31387461899640.jpg" class="img-responsive prodImg" style="max-height: 300px; width: auto !important;">
              <div class="carousel-caption" style="left: 0% !important;right: 40% !important;">

                <div id="mycarousel" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="item active" style="display: none ;">

                      <img src="http://192.168.1.108/forushgah_karbalaie//badge.png" style="width: 80px;">
                      <div class="carousel-caption " style="left: 0% !important;    right: 10% !important;bottom: 30% !important;font-size: 18px;">
                        <br>
                        <b>Warning</b>: Division by zero in <b>D:\xampp\htdocs\forushgah_karbalaie\func.php</b> on line <b>732</b>
                        <br>
                        <strong>۱۰۰</strong>%</div>
                    </div>
                  </div>
                </div>



              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="info">
      <div class="separator clear-left text-center" style="margin-top: 5px;">
        <div style="width: 100%;" class="text-right" dir="rtl" id="prName">
          <a href="#" title="link title">Link</a>
        </div>
        <div style="width: 100%;" class="text-right priceTag" id="prPrice" dir="rtl">
          ۱,۰۰۰&nbsp;&nbsp; تومان</div>
        <div class="prDesc">text</div>

      </div>
      <div class="clearfix">
      </div>
    </div>
  </div>
</div>

当div在悬停时扩展时，div会搞乱

0 个答案: