HTML - Make hover over div affect multiple divs?

Question

So here's the code: 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;}

So when you hover over the blue bar, it's div expands, but the selection numbers should expand too when hovering over anywhere that bar, not just when you hover over them. Hope you understand this.

Answer 1

see here : 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;}

UPDATE Have a look at this http://jsfiddle.net/wywyY/9/ (probably even more exactly what you are looking for)

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

Answer 2

Add this CSS:

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

Here's a fiddle: http://jsfiddle.net/wywyY/8/