我喜欢制作一个非常简单的索引页面，其中有一个白色的 HTML 页面，中间的文本为
USEStudio
然后鼠标悬停时它会更改为:
UrbanSpaceEvent.Studio
我喜欢将第二个文本链接到网站
我已经尝试了一些 CSS 代码，但无法添加淡入淡出功能，并且当我添加链接时它不起作用
最佳答案
如何切换可见性
仅 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow.com</title>
<style>
.wrap{
text-align: center;
}
.wrap:hover .state--off {
display: block;
}
.wrap:hover .state--on,
.state--off {
display: none;
}
</style>
</head>
<body>
<a href="YourLinkGoesHere" class="wrap">
<p class="state--on">USEStudio</p>
<p class="state--off">UrbanSpaceEvent.Studio</p>
</a>您还想添加淡入和淡出 - 对吗？
又快又脏 | jQuery 方式
(function($) {
var toggleState = function( domWrap, sClass ) {
$Children = $( domWrap ).children();
var $Hidden = $Children.filter(':hidden'),
$Visible = $Children.filter(':visible');
$.when(
$Visible.animate({opacity: 0})
).then(function(){
$Visible.hide();
$Hidden
.css({display: 'block', opacity: 0})
.animate({opacity: 1}, 'slow');
})
};
$(function() { // document ready
$('.wrap')
.mouseenter(function(){ toggleState( this ) })
.mouseleave(function(){ toggleState( this ) })
})
})(jQuery).wrap{
text-align: center;
}
.state--off {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow.com</title>
</head>
<body>
<a href="YourLinkGoesHere" class="wrap">
<p class="state--on">USEStudio</p>
<p class="state--off">UrbanSpaceEvent.Studio</p>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>或者您可能想使用这个名为的奇特库
动画.css
以 jQuery 作为后备的 CSS 动画
https://daneden.github.io/animate.css/
(function($) {
// choose from https://daneden.github.io/animate.css/ and customize this script
var sClassIn = 'zoomIn', // <- your string here //////////////////
sClassOut = 'rotateOut'; // <- your string here //////////////////
sClassIn += ' animated';
sClassOut += ' animated';
var sAnimationEnd = (function() {
var t,
el = document.createElement('fakeelement'),
animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
}
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})();
var toggleState = function(domWrap, sClass) {
$Children = $(domWrap).children();
var $Hidden = $Children.filter(':hidden'),
$Visible = $Children.filter(':visible');
if (sAnimationEnd) { // modern browsers css animation
var $Deferred = $.Deferred();
$Visible.attr('class', sClassOut).one(
sAnimationEnd,
function() {
$Visible.hide().attr('class', '');
$Hidden.show().attr('class', sClassIn);
$Deferred.resolve();
}
);
return $Deferred.promise();
} else { // fallback | js animation
return $.when( $Visible.animate({ opacity: 0 }) ).then(function() {
$Visible.hide();
$Hidden.show().animate({ opacity: 1 }, 'slow');
});
}
};
$(function() { // document ready
$('.wrap')
.mouseenter(function() { toggleState(this) })
.mouseleave(function() { toggleState(this) })
})
})(jQuery).body, html {
overflow: hidden;
}
.wrap{
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stackoverflow.com</title>
<style></style>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eefe0e7e3effaeba0edfdfdcebda0bba0bc" rel="noreferrer noopener nofollow">[email protected]</a>/animate.css" rel="stylesheet"/>
</head>
<body>
<a href="YourLinkGoesHere" class="wrap">
<p>USEStudio</p>
<p style="display:none">UrbanSpaceEvent.Studio</p>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>关于jquery - 悬停时过渡文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46020758/