Question

我需要知道如何在css类和html类

的java脚本中创建数组

这是我的HTML：

<li> 
    <a href="list2.html" class="img-list0">     
        <div class="list_City0">
            <img src="images/03.jpg" height="200"/>
            <h5 class="text-center">Alexandria</h5>
            <p class="text-center">Is very nice city. </p>
        </div> List page 1
    </a>
</li>
<!-- HERER MY ADD PLEASE DONT FORGET ----->
<li> <a href="list2.html" class="img-list1"> 
    <div class="list_City1">
        <img src="images/08.jpg" height="200"/>
        <h5 class="text-center">Cairo</h5>
        <p class="text-center">Is very nice city. </p>      
    </div>List page 2</a>
</li>

和我的CSS：

.list_City0, .list_City1,.list_City9{
     background-size:cover;
     position:absolute;
     width:300px;
     height:300px;
     z-index:9999;
     display:none; 
     margin-left:220px;
     top:30px;
     box-shadow:4px 4px 5px #888;
     overflow:hidden;
     border-radius:10px;
}

我在java脚本中写这个因为我不想写更多内容来做这个

   var htmlarraycity=[$(".img-list0"),$(".img-list1"),$(".img-list9")];
        var cssarraycity=  [$(".list_City0"),$(".list_City1"),$(".list_City9")];

    for(i=0;htmlarraycity[i].length;i++){


            (htmlarraycity[i]).hover(function(){
        (cssarraycity[i]).fadeIn(1000);     

    });

       (htmlarraycity[i]).mouseleave(function(){
       (cssarraycity[i]).hide();

   });

Answer 1

我非常确定你需要做的就是以下内容 - 不需要数组或循环：

var hoverlist = '.img-list0, .img-list1, .img-list9';
var showlist = '.list_City0, .list_City1, .list_City9';

$(hoverlist).hover(function () {
  $(showlist).fadeIn(1000);
},function () {
  $(showlist).hide();
});

DEMO

Answer 2

使用jQuery's "starts with" selector，您可以绑定到所有.img-list*元素的悬停事件，而无需将每个对象存储在数组中。同样，您也可以显示/隐藏嵌套的.list_City*元素。最后，jQuery不是使用fadeIn() / fadeOut()，而是使用一个名为fadeToggle()的函数来为您处理这个逻辑。

<强>段：

// starts with selector
$('*[class^="img-list"]').hover(function() {

  $(this).children('*[class^="list_City"]').fadeToggle(1000);

});

.list_City0,
.list_City1,
.list_City9 {
  background-size: cover;
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 9999;
  display: none;
  margin-left: 220px;
  top: 30px;
  box-shadow: 4px 4px 5px #888;
  overflow: hidden;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li>
  <a href="list2.html" class="img-list0">
    <div class="list_City0">
      <img src="images/03.jpg" height="200" />
      <h5 class="text-center">Alexandria</h5>
      <p class="text-center">Is very nice city.</p>
    </div>List page 1
  </a>
</li>
<!-- HERER MY ADD PLEASE DONT FORGET ----->
<li>
  <a href="list2.html" class="img-list1">
    <div class="list_City1">
      <img src="images/08.jpg" height="200" />
      <h5 class="text-center">Cairo</h5>
      <p class="text-center">Is very nice city.</p>
    </div>List page 2</a>
</li>

在父母悬停时淡入元素

2 个答案: