Css tooltip oluşturma

Merhabalar

Bir wordpress sitem var popular post widgeti ekledim.
Ama widgeti biraz geliştirmek istiyorum.

Amacım:


widgetin html kodları:

<div class="widget">
<!-- START WIDGET -->

      <div class="scroll-grid full">
      <h3>En Çok Okunanlar          <a class="btn_next" id="next_2" href="http://xsite.com/#"><span>next</span></a>
          <a class="btn_prev" id="prev_2" href="http://xsite.com/#"><span>prev</span></a>
      </h3>
      <div class="miniscroller" style="height: 68px; visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 511px;" id="miniscroller_2">
      <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 1606px; left: -876px;"><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-android/" title="deneme android">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme android">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/bot-deneme-baslik-4/" title="bot deneme başlık8" data-tooltip="bot deneme başlık8">
<img src="http://xsite.com/wp-content/uploads/2014/08/call_of_duty-85x60.jpg" width="82" height="60" alt="bot deneme başlık8">
</a>
</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>
</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>
</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-android/" title="deneme android">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme android">

</a>
</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/bot-deneme-baslik-4/" title="bot deneme başlık8" data-tooltip="bot deneme başlık8">
<img src="http://xsite.com/wp-content/uploads/2014/08/call_of_duty-85x60.jpg" width="82" height="60" alt="bot deneme başlık8">
</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>
</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>
</li></ul>
</div>


 
</div>
<!-- END WIDGET -->

</div>

54 kişi bakmış kimsenin fikri yok mu?

Geliştirmek istiyorsun ama ne yapmak istiyorsun ?

Konuyu açarken isteklerini veya soracaklarını belirtebilirsen forumdakiler daha rahat yardımcı olurlar.

http://www.adobewordpress.com/css-il...cuklari#result

Css stilinizi burdakine göre ayarlayın. Sayfada verilen section elemanı arasına wordpress konu descriptionlarını belirtebilirsiniz.

Section'ı ekledim ama
konu üstüne gelince section elementini etkileyemiyorum.

#sc1 {
max-height: 15px;
overflow: hidden;
background-color: #fff;
border-left:8px #ccc solid;
width: 220px;
padding: 4px;
color: #000;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
font:12px Tahoma;
margin:4px;
}

/* burası çalışmıyor li üstüne gelince etkilenmiyor section. */
.scroll-grid.full li:hover > #sc1  {
max-height:200px;
}

Allta section var ayırdım:

<div class="widget">
<!-- START WIDGET -->

      <div class="scroll-grid full">
      <h3>En Çok Okunanlar          <a class="btn_next" id="next_2" href="http://xsite.com/#"><span>next</span></a>
          <a class="btn_prev" id="prev_2" href="http://xsite.com/#"><span>prev</span></a>
      </h3>
      <div class="miniscroller" style="height: 68px; visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 511px;" id="miniscroller_2">
      <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 1606px; left: -730px;"><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>

</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>

</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-android/" title="deneme android">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme android">

</a>


</li>

<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/bot-deneme-baslik-4/" title="bot deneme başlık8" data-tooltip="bot deneme başlık8">
<img src="http://xsite.com/wp-content/uploads/2014/08/call_of_duty-85x60.jpg" width="82" height="60" alt="bot deneme başlık8">
</a>

</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>

</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>


</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>


</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>

</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>


</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>


</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-android/" title="deneme android">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme android">

</a>


</li>


<li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/bot-deneme-baslik-4/" title="bot deneme başlık8" data-tooltip="bot deneme başlık8">
<img src="http://xsite.com/wp-content/uploads/2014/08/call_of_duty-85x60.jpg" width="82" height="60" alt="bot deneme başlık8">
</a>

</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/deneme-programlar/" title="deneme programlar" data-tooltip="deneme programlar">
<img src="http://xsite.com/wp-content/uploads/2014/08/k_17225805_program.png.jpeg-85x60.jpg" width="82" height="60" alt="deneme programlar">
</a>

</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayr-oyunlar/" title="Deneme bilgisayr oyunlar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Deneme bilgisayr oyunlar">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/merhaba-dunya/" title="Merhaba dünya!">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="Merhaba dünya!">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">
<a href="http://xsite.com/frc/" title="frc" data-tooltip="frc">
<img src="http://xsite.com/wp-content/uploads/2014/08/images-85x60.jpg" width="82" height="60" alt="frc">
</a>

</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-yamalar/" title="deneme bilgisayar yamalar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar yamalar">

</a>


</li><li style="overflow: hidden; float: left; width: 73px; height: 58px;">

<a href="http://xsite.com/deneme-bilgisayar-videolar/" title="deneme bilgisayar videolar">

<img src="http://xsite.com/wp-content/themes/Gameleon/images/thumbnail-76.png" width="82" height="60" alt="deneme bilgisayar videolar">

</a>


</li></ul>

</div>










<section id="sc1">deneme android17777777777777        <br><br><br><br><br><br>  <br>ddd     </section>
 








</div>
<!-- END WIDGET -->

</div>
</div>