如何切换可见性

Question

我想制作一个非常简单的索引页面，其中我将有一个白色HTML页面，中间文本中的文本将是

                               USEStudio

然后在鼠标悬停时，它将变为：

                         UrbanSpaceEvent.Studio

我喜欢将第二个文字链接到网站

我已经尝试了一些CSS代码，但我无法添加淡出淡出功能，当我添加链接时，它无法正常工作

Answer 1

我认为这是你想要的纯css没有javascript

extension UIBezierPath
{

    func scaleAroundCenter(factor: CGFloat)
    {
        let beforeCenter = self.bounds.getCenter()

        // SCALE path by factor
        let scaleTransform = CGAffineTransform(scaleX: factor, y: factor)
        self.apply(scaleTransform)

        let afterCenter = self.bounds.getCenter()
        let diff = CGPoint(
            x: beforeCenter.x - afterCenter.x,
            y: beforeCenter.y - afterCenter.y)

        let translateTransform = CGAffineTransform(translationX: diff.x, y: diff.y)
        self.apply(translateTransform)
    }

}

Answer 2

如何切换可见性

仅限CSS

＆＃13;

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

＆＃13;

您还想添加淡入淡出和＆amp;淡出 - 对吧？

快而脏| jQuery方式

＆＃13;

(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)

＆＃13;

.wrap{
    text-align: center;
}

.state--off {
    display: none;
}

＆＃13;

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

＆＃13;

或者您可能想要使用这个名为

的花哨库

Animate.css

使用jQuery作为后备的CSS动画

https://daneden.github.io/animate.css/

＆＃13;

(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)

＆＃13;

.body, html {
    overflow: hidden;
}
.wrap{
    text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>stackoverflow.com</title>
    <style></style>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/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>

＆＃13;

悬停时转换文本

2 个答案:

如何切换可见性

您还想添加淡入淡出和＆amp;淡出 - 对吧？

Animate.css