html/css 的 :hover 和动画问题答案

【问题标题】：Issue of :hover and animation with html/csshtml/css 的 :hover 和动画问题
【发布时间】：2016-05-10 06:29:42
【问题描述】：

我正在创建我的个人网站，但我遇到了一个问题：当您将鼠标悬停在名称上时，它应该向右滚动，并且它应该出现在其下方，但“嗨，我是”继续存在。 ..任何提示/帮助？ 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>

【问题讨论】：

您愿意使用 jQuery，还是必须 100% 坚持使用纯 CSS 实现？我问的原因是jQuery支持“链式动画”，例如“向右移动，然后显示hiIAM”，在易于理解和阅读的代码中明确显示。

标签： html css animation hover

【解决方案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;
}

【讨论】：

【解决方案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);
  });
  }
);

【讨论】：