当鼠标悬停在按钮上时，在CSS上翻转动画 [英] Flip animation on CSS when mouse is hovering over a button

查看：72
本文介绍了当鼠标悬停在按钮上时，在CSS上翻转动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试获得一个CSS翻转动画，该动画基于鼠标指针在按钮上的悬停效果。
现在您可以在



我有以下html代码：

 <！DOCTYPE html> 
< html lang = zh-CN> 
< head> 
< meta charset = utf-8 /> 
< title>卡已翻转< / title> 
< meta name = viewport content = width = device-width，initial-scale = 1.0> 
< meta content =一个功能齐全的管理主题，可用于构建CRM，CMS等。 name = description /> 
< meta content = Coderthemes name =作者 /> 
< ;!-App favicon-> 
< link rel =快捷方式图标 href = assets / images / favicon.ico> 
 
< ;!-App css-> 
< link rel = stylesheet href = https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css完整性= sha384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8Jerd 匿名> 
< / head> 
 
< body> 
 
< ;!-起始页-> 
< div class = wrapper> 
< div class = row> 
< div class = col-md-6 col-lg-3> 
 
< ;!-简单卡片-> 
< div class = flip-container> 
< div class = flipper> 
< div class = front> 
<！-前面的内容-> 
< div class = card d-block> 
< img class = card-img-top src = https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP图片=  weight = 80> 
< div class = card-body> 
< h5 class = card-title>粒子物理学简介< / h5> 
< p class = card-text>一些简单的示例文字，以卡片标题为基础，使
占卡片内容的大部分。一个快速的示例文本，可建立在卡片标题上并组成。< / p> 
< a href = javascript：void（0）; class = btn btn-primary>购买< / a> 
< a href = javascript：void（0）; class = btn btn-primary view-details>查看详细信息< / a> 
< / div> <！-尾卡主体-> 
< / div> <！-结束卡-> 
< / div> 
 
< div class = back> 
< h1>您喜欢吗？< / h2><！-返回内容-> 
< / div> 
< / div> 
< / div> 
 
< / div> 
<！-结束包装-> 
 
< script src = assets / js / app.min.js>< / script> 
< / body> 
< / html>

此CSS代码：

  / *翻转双侧启动动画代码* / 
 / *整个容器，保持透视* / 
 / *悬停时翻转窗格* / 
 
 .flip-container：hover .flipper {
 transform：rotationY（180deg）; 
} 
 
 / * 
 .view-details：hover .flipper {
 transform：rotationY（180deg）; 
} 
 * / 
 
 .flip-container，.front，.back {/ * Attention * / 
 width：280px; 
高度：480px； 
} 
 
 
 / *翻转速度在这里* / 
 .flipper {
过渡：0.6s； 
转换样式：preserve-3d； 
 
职位：相对； 
} 
 
 / *在交换期间隐藏窗格的背面* / 
 .front，.back {
 backface-visibility：hidden; 
 
位置：绝对； 
 top：0；剩余
：0； 
} 
 
 / *前窗格，位于背面* / 
 .front {
 z-index：2; 
 / * for firefox 31 * / 
转换：rotateY（0deg）; 
} 
 
 / *返回，最初隐藏的窗格* / 
 .back {
 transform：rotationY（180deg）; 
} 
 / *翻转双端代码动画* /

但是我想得到的是，当您将鼠标指针放在viw详细信息按钮上时，您会得到整个卡片的翻转动画。
视图详细信息按钮包含一个名为视图详细信息的类。因此，我尝试更改css行：

  .flip-container：hover .flipper {
 transform：rotationY（ 180度）； 
}

另一个：

  .view-details：hover .flipper {变换：rotateY（180deg）; 
}

但显然没有任何反应。
顺便说一句，我从 David Walsh网页获取了CSS代码和html代码的一部分

解决方案

什么都没有发生，因为您试图使用仅使用CSS的子对象为父选择器设置动画。不幸的是，目前无法仅使用CSS选择元素的父级。您将需要使用类似的Javascript / jQuery解决方案来实现所需的效果。



  $（'a.view-details'）。mouseover（function（）{$（this）.parents（'。flipper'）。css（'transform'，'rotateY（180deg）'）; }）。mouseout（function（）{$（this）.parents（'。flipper'）。css（'transform'，``）;}）;

< pre class = snippet-code-css lang-css prettyprint-override> / *翻转双侧启动动画代码* // *整个容器，保持透视* /。flip-container，.front， .back {/ *注意* /宽度：280像素；高度：480像素；} / *此处的翻转速度* /。flipper {过渡：0.6秒；转换样式：reserve-3d;位置：相对；} / *在交换过程中隐藏在窗格的后面* /。front，.back {back-visibility：hidden;位置：绝对；最高：0;左：0;} / *前窗格，位于后* /。front上方{z-index：2; / *对于firefox 31 * /变换：rotateY（0deg）;} / *返回，最初隐藏的窗格* /。back {变换：rotateY（180deg）;} / *翻转双端代码动画* / 

 <！DOCTYPE html>< html lang = zh-CN>< ; head> < meta charset = utf-8 /> < title>卡片翻转了< / title> < meta name = viewport content = width = device-width，initial-scale = 1.0> < meta content =功能齐全的管理主题，可用于构建CRM，CMS等。 name = description /> < meta content = Coderthemes name =作者 /> <！-应用程序图标-> < link rel =快捷方式图标 href = assets / images / favicon.ico> <！-App css-> < link rel = stylesheet href = https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css完整性= sha384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO ; < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js< // script>< / head>< body> <！-起始页-> < div class = wrapper> < div class = row> < div class = col-md-6 col-lg-3> <！-简单卡片-> < div class = flip-container> < div class = flipper> < div class = front> <！-最前面的内容-> < div class = card d-block> < img class = card-img-top src = https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP alt =卡片重量80英寸> < div class = card-body> < h5 class = card-title>粒子物理学简介< / h5> < p class = card-text>一些简短的示例文本，可建立在卡片标题上，并构成卡片内容的大部分。一个快速的示例文本，可建立在卡片标题上并组成。< / p> < a href = javascript：void（0）; class = btn btn-primary>购买< / a> < a href = javascript：void（0）; class = btn btn-primary view-details>查看详细信息< / a> < / div> <！-尾卡主体-> < / div> <！-结束卡-> < / div> < div class = back> < h1>你喜欢吗？< / h2> <！-返回内容-> < / div> < / div> < / div> < / div> <！-END包装器-> < script src = assets / js / app.min.js>< / script>< / body>< / html>


I´m trying to get a css flip animation that is based on a hover effect of the mouse pointer over a button. Now you can see something similar at this codepen In this codepen example you get a flip animation when you hover the mouse pointer over the card.

I´ve got this html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Card Flipped</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App css -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>

        <!-- Begin page -->
        <div class="wrapper">
                        <div class="row">
                            <div class="col-md-6 col-lg-3">

                                <!-- Simple card -->
                                  <div class="flip-container" >
                             <div class="flipper">
                             <div class="front">
                                <!-- front content -->
                                <div class="card d-block">
                                      <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
                                    <div class="card-body">
                                        <h5 class="card-title">Introduction to particle physics</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
                                        <a href="javascript: void(0);" class="btn btn-primary">Buy</a>
                                        <a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                             </div>

                                    <div class="back">
                                        <h1>Do you like it?</h2><!-- back content -->
                                    </div>
                                </div>
                            </div>

        </div>
        <!-- END wrapper -->

        <script src="assets/js/app.min.js"></script>
    </body>
</html>

And this css code:

/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */
/* flip the pane when hovered */

.flip-container:hover .flipper{
        transform: rotateY(180deg);
    }

/*
.view-details:hover .flipper {
    transform: rotateY(180deg);
  }
*/

.flip-container, .front, .back { /*Attention*/
    width: 280px;
    height: 480px;
}


/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/

But what I´m trying to get is that when you put the mouse pointer over the viw details button then you get the flip animation of the whole card. The view details button contains a class called "view-details". So I tried to change the css line:

.flip-container:hover .flipper{
        transform: rotateY(180deg);
    }

for this other one:

.view-details:hover .flipper{   transform: rotateY(180deg);
        }

But apparently nothing happens. By the way, I get the css code and part of the html code from David Walsh web page

解决方案

Nothing is happening because you are trying to animate a parent selector from a child using only CSS. Unfortunately there is currently no way to select the parent of an element using just CSS. You will need to use a Javascript/jQuery solution like this to achieve the effect you are looking for.

$('a.view-details').mouseover(function() {
  $(this).parents('.flipper').css('transform', 'rotateY(180deg)');
}).mouseout(function() {
	$(this).parents('.flipper').css('transform', '');
});

/* FLIP DOUBLE SIDE START ANIMATION CODE */
/* entire container, keeps perspective */

.flip-container,
.front,
.back {
	/*Attention*/
	width: 280px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front,
.back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
/* FLIP DOUBLE SIDE END CODE ANIMATION*/

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Card Flipped</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
	<meta content="Coderthemes" name="author" />
	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- App css -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

	<!-- Begin page -->
	<div class="wrapper">
		<div class="row">
			<div class="col-md-6 col-lg-3">

				<!-- Simple card -->
				<div class="flip-container">
					<div class="flipper">
						<div class="front">
							<!-- front content -->
							<div class="card d-block">
								<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
								<div class="card-body">
									<h5 class="card-title">Introduction to particle physics</h5>
									<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
									<a href="javascript: void(0);" class="btn btn-primary">Buy</a>
									<a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
								</div>
								<!-- end card-body-->
							</div>
							<!-- end card-->
						</div>

						<div class="back">
							<h1>Do you like it?</h2>
								<!-- back content -->
						</div>
					</div>
				</div>

			</div>
			<!-- END wrapper -->

			<script src="assets/js/app.min.js"></script>
</body>

</html>

这篇关于当鼠标悬停在按钮上时，在CSS上翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆