Question

我正在创建我的个人网站而且我遇到了一个问题：当你将鼠标悬停在名称上时，它应向右滚动，它应该显示在它下面，但是＆＃34; hi，i＆＃39 ; M＆＃34;继续留下......任何提示/帮助?? jsfiddle.net/qm3cvb58

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

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悬停和动画

2 个答案: