Отразить анимацию на CSS, когда мышь находится над кнопкой - PullRequest
Новая
       36

Отразить анимацию на CSS, когда мышь находится над кнопкой

0 голосов
/ 27 ноября 2018

Я пытаюсь получить анимацию щелчка css, основанную на эффекте наведения курсора мыши на кнопку.Теперь вы можете увидеть нечто похожее в этой кодовой ручке . В этом примере кодовой ручки вы получаете анимацию при переворачивании курсора мыши над картой.

enter image description here

У меня есть этот HTML-код: 

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

И этот код CSS: 

/* 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*/

Но я пытаюсь получить, когда вы кладетеНаведите указатель мыши на кнопку «Подробности viw», и вы получите анимацию переворачивания всей карты.Кнопка просмотра сведений содержит класс под названием «просмотр сведений».Поэтому я попытался изменить строку CSS: 

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

на другую: 

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

Но, видимо, ничего не происходит.Кстати, я получаю код CSS и часть HTML-кода с веб-страницы Дэвида Уолша

1 Ответ

0 голосов
/ 28 ноября 2018

Ничего не происходит, потому что вы пытаетесь анимировать родительский селектор от ребенка, используя только CSS.К сожалению, в настоящее время нет способа выбрать родителя элемента, используя только CSS.Вам нужно будет использовать такое решение Javascript / jQuery, чтобы достичь желаемого эффекта. 

$('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>
...