Question

所以这是代码： http://jsfiddle.net/wywyY/

<div id="slidy" class="slidepart fl">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
   <div class="sl_paginationpart">
<ul id="slidya" class="slpagination">
    <li><a href="javascript: prevnext(0);" class="prev"></a></li>
    <li><a href="javascript: thisisit(0)" class="number select">1</a></li>
    <li><a href="javascript: thisisit(1)" class="number ">2</a></li>
    <li><a href="javascript: thisisit(2)" class="number ">3</a></li>
    <li><a href="javascript: thisisit(3)" class="number ">4</a></li>
    <li><a href="javascript: thisisit(4)" class="number ">5</a></li>
    <li><a href="javascript: prevnext(1);" class="next"></a></li>
</ul>

 .fl{ float:left;}

 .slidepart{width:200px; height:250px; overflow:hidden; position:relative;       border:#218559 solid 2px; box-shadow:gray 2px 5px 5px;}
.slidepart img {position:absolute; height:450px; border: black solid 1px;}
.sl_paginationpart{display:block; background:#41C7FF no-repeat left; width:100%; height:1px; position:absolute; right:0px; bottom:0px; padding:6px; transition:all 0.5s ease}
.sl_paginationpart:hover {height:15px; opacity: 0.8; background: }
ul.slpagination{ margin:0px; padding:0px; list-style:none; font-family:helvetica;}
ul.slpagination:hover{ margin:0px; padding:0px; list-style:none; font-family:helvetica;}
ul.slpagination li{ margin:0px; padding:0px; list-style:none; float:left; height:100% }
ul.slpagination li a.prev{width:14px; height:15px; display:block; margin-top: 2px;}
ul.slpagination li a.next{width:14px; height:15px; display:block; margin-top: 2px;}
ul.slpagination li a.number{background:lightgray;width:25px; height:4px ; display:block; text-align:center; margin:0px 3px; font-size:0px; font-weight:bold; color:#006aa6; text-decoration:italic; font-family: helvetica; border-radius:5px 5px 2px;}
ul.slpagination li a.number:hover{background:green; color:white; height:18px; font-size:14px;}
ul.slpagination li a.select{background:black; color:blue; text-decoration:none; text-decoration:italic; font-size:14px;}

因此，当您将鼠标悬停在蓝色条上时，它的div会扩展，但是当将鼠标悬停在任何位置时，选择数字也会扩大，而不是仅仅将鼠标悬停在它们上方。希望你能理解这一点。

Answer 1

见这里：http://jsfiddle.net/wywyY/1/

ul.slpagination:hover{ margin:0px; padding:0px; list-style:none; font-family:helvetica;}
ul.slpagination:hover li a.number{background:green; color:white; height:18px; font-size:14px;}

<强>更新看看这个http://jsfiddle.net/wywyY/9/（可能更准确地说你正在寻找的东西）

  .sl_paginationpart:hover li a.number{background:green; color:white; height:18px; font-size:14px;}

Answer 2

添加此CSS：

.sl_paginationpart:hover li a.number {
    height: 18px;
}

这是一个小提琴：http://jsfiddle.net/wywyY/8/

HTML - 将鼠标悬停在div上影响多个div？

2 个答案: