1

当您用鼠标移动它时，我想更改一些文本 bij 用 url 替换它。我知道您无法通过使用动画（用于 css）来更改它，这就是我使用淡出的原因。在花了几个小时之后，我仍然无法弄清楚为什么它不起作用。

我还想要页面中心的整个 div，我尝试了 valign 等，但这也不起作用。这不是优先事项，但最好更换 margin-top

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#change").hover(
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('<a href="Index.html">Continue</a>').fadeIn('slow'); 
    });
}, 
function(){
    $(this).find('p').fadeOut('slow', function() {
          $(this).text('Welcome').fadeIn('slow'); 
    });    
});
</script>

提前谢谢！

4

2 回答 2

4

使用html方法：

$(this).html('<a href="Index.html">Continue</a>').fadeIn('slow');
于 2013-01-31T09:33:36.307 回答
0

嗯，没有我想的那么容易。

快速移动鼠标时，mouseenter/over mouseleave/out 太容易触发，因此：

<div align="center" style="margin-top: 20%;"> 
  <div id="change">
    <p id="big">Welcome!</p>
    <p id="link" style="display:none"><a href="Index.html">Continue</a></p>
  </div>
  <img src="pic.JPG" alt="Logo" width="40%" height="90"/>
</div>

使用

$(function() {
  $("#change").hover(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  });
});

几乎可以工作。但由于进入/离开事件，您可能会在屏幕上看到两者

但是，如果我们使用hoverIntent它可以工作 - 您需要先下载并包含jquery.hoverIntent.minified.js

演示

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#link").fadeIn('slow');
    });
  },
  function(){
    $("#link").fadeOut('slow',function() {
      $("#big").fadeIn('slow');
    });
  }    
);

或者如果您坚持更改 html：DEMO

$("#change").hoverIntent(function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('<a href="Index.html">Continue</a>').fadeIn('slow');
    });
  },
  function(){
    $("#big").fadeOut('slow',function() {
      $("#big").html('Welcome').fadeIn('slow');
    });
  }    
);
于 2013-01-31T10:00:56.900 回答