如何用鼠标悬停来更改滑块项目

Question

我已经开始在我的wordpress项目中使用我朋友的jquery滑块了。但是当我将鼠标悬停在滑块项目编号上时，我希望滑块项目在鼠标悬停时更新。

屏幕截图;

以下是 HTML代码;

<div class="PozManset">
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
  <div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
</div>
<div style="margin:3px 0px 0px 0px"><span id="sayfa_no"></span></div>
<div style="float:left;width:101px;background:#8169A7;margin-left:1px;height:24px;color:#fff;line-height:20px;">Bütün manşetler</div>

以下是 CSS代码;

.PozHeadline {float:left;width:630px;height:340px;margin:20px 10px 5px 10px;}
.PozManset {cursor:pointer;width:630px; height:300px;display:none;background:#fff;}
.PozManset div{ width:630px; height:300px;overflow:hidden;}
.PozManset div img {float:left;width:630px;padding:0px;border:0px;}
.sayfa{float:left;padding:2px 0;margin:0 2px 0 0;color:#fff;cursor:pointer;font-family:calibri;font-size:14px;border:solid 1px #8169A7; width:20px;height:18px;line-height:20px; text-align:center;}
.manset_f{float:left;border:0;}
.manset_h{float:left;text-align:left;padding:0px 0px 0px 10px;background-color:#F669B0;color:#fff;width:620px;margin:-100px 0px 5px 0px;height:40px;line-height:40px;font-size:20px;color:#fff;font-weight:bold;}
.PozManset a{text-decoration:none;cursor:pointer;}

这是 jquery代码;

  var aktif = 1; var timer; var adet;
  $(document).ready(function(){
    $(".PozManset").show();
    $(".PozManset div").hide();
    $(".PozManset div:first").show();
    adet = $(".PozManset div").length;
    sayfalar();
    renk(1);
    timer = setInterval(degistir,5000);
  });
  function degistir()
  {
    $(".PozManset div:nth-child("+aktif+")").slideUp(100);
    aktif = (aktif + 1) % adet;
    if(aktif == 0) aktif = adet;
    $(".PozManset div:nth-child("+aktif+")").slideDown(200);
    renk(aktif);
  }
  function tikla(deger)
  {
    renk(deger);
    $(".PozManset div:nth-child("+aktif+")").slideUp(100);
    aktif = deger;
    $(".PozManset div:nth-child("+aktif+")").slideDown(200);
    clearInterval(timer);
    timer = setInterval(degistir,5000);
  }
  function renk(deger)
  {
    $("#sayfa_no span").css("background-color","#8169A7")
    $("#sayfa_no span:nth-child("+deger+")").css("background-color","#F776B6");
  }
  function sayfalar()
  {
    var sayfa_no = "";
    for(var i = 1; i <= adet; i++)
    {
      sayfa_no += "<span class='sayfa' onclick=tikla("+i+")>"+i+"</span>"
    }
    $("#sayfa_no").html(sayfa_no);
  }

现在，当您点击可以看到的数字时，滑块项目正在发生变化。我想改变它，而不是当我在特定数字上使用鼠标光标时。

Answer 1

而不是这个..

sayfa_no += "<span class='sayfa' onclick=tikla("+i+")>"+i+"</span>"

使用这个......

 sayfa_no += "<span class='sayfa' onmouseover=tikla("+i+")>"+i+"</span>"