html/css 的 :hover 和动画问题

Question

我正在制作我的个人网站，但我遇到了一个问题：当您将鼠标悬停在名称上时，它应该向右滚动并且应该出现在它下面的文字，但是 "hi, i'm" 继续保留。 .. 任何提示/帮助？ jsfiddle.net/qm3cvb58

#name {
 position:relative;
 top:100px;
 left:50px;
 font-family: Impact, Charcoal, sans-serif;
 font-weight: lighter;
 color:#ffffff;
 font-size:40px;
 cursor:pointer;
 
 
  transition-property: width, opacity, margin-left, border-width;
  transition-duration: 2s;
 
  -webkit-transition-property: width, opacity, margin-left, border-width;
  -webkit-transition-duration: 2s;
         
  -o-transition-property: width, opacity, margin-left, border-width;
  -o-transition-duration: 2s;
         
  -moz-transition-property: width, opacity, margin-left, border-width;
  -moz-transition-duration: 2s;
}
p:hover{

 margin-left: 130px;
 
 
}
#presentation {
 position:relative;
 top:15px;
 left:50px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: lighter;
 color:#ffffff;
 font-size:40px;
 cursor:pointer;
 overflow: hidden;
 
 
 
 
}
html{
 cursor:url(http://www.severdhed.com/images/arcade/cursors/gifs/invader1.gif),auto;
  
 background: url(http://sf.co.ua/13/07/wallpaper-2951792.jpg) no-repeat center center fixed;

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 overflow-x: hidden;

}

#some-div:hover #some-element {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
<title>Shawn Pinciara</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>

<p id="name">NAME SURNAME</p>
<a id="presentation">HI, I'M</a>


</body>
</html>

Answer 1

你可以试试 this 或许：

#presentation {
  opacity: 0;
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
}
#name:hover + #presentation {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  opacity: 1;
}

Answer 2

使用您的代码编写了一个 jQuery 动画的快速示例。参见 here。

$( "#container" ).hover(
function() {
//This is run when mouse enters.
$( "#name" ).animate({
left: "+=130"
}, 2000, function() {
//animation complete
$( "#presentation" ).animate({
opacity: "1"
  }, 2000);
  });
  }, function() {
    //This is run when mouse leaves.
    $( "#presentation" ).animate({
    opacity: "0"
  }, 2000, function() {
    // Animation complete.
    $( "#name" ).animate({
    left: "-=130"
  }, 2000);
  });
  }
);

html/css 的 :hover 和动画问题

Issue of :hover and animation with html/css

html

css

animation

hover