我喜歡做一個非常小的，簡單的索引頁中，我將有一個白色的HTML頁面，並在中間文本的文本將過渡文本懸停

       USEStudio

然後鼠標懸停時會更改爲：

      UrbanSpaceEvent.Studio

，我喜歡第二個文本鏈接到網站

我已經嘗試了一些CSS代碼，但我不能淡出功能添加淡入淡出，當我添加鏈接它不「T工作

來源

2017-09-03 Farid Amin

告訴我們你試過的代碼？ –

認爲你必須使用JavaScript來實現這一點。但是，是的...給你使用的代碼 –

你可以實現這個使用css ::後psedo，檢查我的anwser希望它有幫助 –

如何切換可見

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>

或者你可能想用這個花哨的功能叫做

Animate.css

CSS動畫與jQuery作爲後備

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/[email protected]/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>

來源

2017-09-04 02:28:39 Axel

我覺得這是你想要純CSS沒有什麼JavaScript的

<html> 
 
<head> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 
\t \t .hover_text:after { 
 
\t \t  content: attr(data-nothovertext); 
 
\t \t } 
 
\t \t .hover_text:hover:after { 
 
\t \t  content: attr(data-hovertext); 
 
\t \t } 
 
\t \t .hover_text { 
 
\t \t  text-align: center; 
 
     display:block; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
<a href="#link_to_your_url" class="hover_text" data-hovertext="UrbanSpaceEvent.Studio" data-nothovertext="USEStudio" ></a> 
 

 
</body> 
 
</html>

來源

2017-09-03 06:22:07

過渡文本懸停

回答

如何切換可見

您還想添加淡入淡出&淡出 - 對吧？

Animate.css

相關問題