悬停时无法产生3D效果

Question

这是3D图书效果的原始版本。https://jsfiddle.net/7asrgok4/

当我尝试使此3D效果显示在鼠标悬停时，它不能在所有图层上使用。

.featured-image-container {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}
.featured-image-container img { vertical-align: middle; }

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d  .bg-book {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container:hover {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin-right: 50px;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container img {
  position: relative;
  max-width: 100%;
  height:196px;
}

.csstransforms3d  .featured-image-container:before,
.csstransforms3d  .featured-image-container:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .featured-image-container:before {
  width: 100%;
  left: 7.5%;
  background-color: #0a0502;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .featured-image-container:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
	<div class="featured-image-container">
	  <img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
  </div>
	<div class="featured-image-container">
	  <img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
	</div>
</div>

Answer 1

您是否在div中使用onmouseover事件？您可以使其触发更改div类的javascript函数。这是有关onmouseover事件的W3文章：https://www.w3schools.com/jsref/event_onmouseover.asp