Question

我有一个圆形的图像，当你将鼠标悬停在它上面时，我希望背景变为纯色并显示文字。这是我到目前为止，它有点工作，但实心背景开始正方形，变成一个圆，而不只是圆形颜色变化？

由于

$( document ).ready(function() {
$(".abutton").click(function() {
  $('.path').attr('class', 'path path-animation');

  setTimeout(function() {
    $('.path').attr('class', 'path path-op');
    $(".abutton").attr("disabled","disabled");
  }, 5000);
});

});

.slideTextUp img {
  margin-top:20px;
}

.slideTextUp div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.slideTextUp div:nth-child(2) { 
  top: 100%;
}

.slideTextUp:hover div {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
background-color: red;
}

svg {
margin: -20px 70px;
}
.dashed{
  stroke-dasharray: 10;

}
.path {
opacity: 0;
}
.path-op {
opacity: 1 !important;
}
.image-cropper {
    background-size: cover;
    background-image: url("/pageassets/test1/ruth.jpg");
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  display: inline-block;
cursor: pointer; 
cursor: hand;
}
.image-cropper {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.image-cropper:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.image-cropper img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.path-animation {
	stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear 1;
opacity: 1;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-cropper abutton slideTextUp">

<div class="rounded bg1"></div>

<div>
<h4 style="font-size: 11px !important;">Person</h4>
<p style="font-size: 11px !important;">Some text about person</p>
</div> 

</div>

Answer 1

因为您的过渡动画是全部触发的。
只需将“all”改为“background-color” 这是你想要的吗？

$( document ).ready(function() {
$(".abutton").click(function() {
  $('.path').attr('class', 'path path-animation');

  setTimeout(function() {
    $('.path').attr('class', 'path path-op');
    $(".abutton").attr("disabled","disabled");
  }, 5000);
});

});

.slideTextUp img {
  margin-top:20px;
}

.slideTextUp div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

.slideTextUp div:nth-child(2) { 
  top: 100%;
}

.slideTextUp:hover div {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
background-color: red;
}

svg {
margin: -20px 70px;
}
.dashed{
  stroke-dasharray: 10;

}
.path {
opacity: 0;
}
.path-op {
opacity: 1 !important;
}
.image-cropper {
    background-size: cover;
    background-image: url("/pageassets/test1/ruth.jpg");
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  display: inline-block;
cursor: pointer; 
cursor: hand;
}
.image-cropper {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.image-cropper:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.image-cropper img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.path-animation {
	stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear 1;
opacity: 1;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-cropper abutton slideTextUp">

<div class="rounded bg1"></div>

<div>
<h4 style="font-size: 11px !important;">Person</h4>
<p style="font-size: 11px !important;">Some text about person</p>
</div> 

</div>

<div><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>

<path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg></div>

Answer 2

问题是因为你有一个0.3秒绑定到.slideTextUp div

的动画

＆＃13;

$( document ).ready(function() {
$(".abutton").click(function() {
  $('.path').attr('class', 'path path-animation');

  setTimeout(function() {
    $('.path').attr('class', 'path path-op');
    $(".abutton").attr("disabled","disabled");
  }, 5000);
});

});

＆＃13;

.slideTextUp img {
  margin-top:20px;
}

.slideTextUp div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  -webkit-transition: all 0s ease;
  transition: all 0s ease; /*here is the problem instead of all you could use background-color (as suggested by 鄭元傑) and set the time back to 0.3s if you would like the animation to stay*/
}

.slideTextUp div:nth-child(2) { 
  top: 100%;
}

.slideTextUp:hover div {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
background-color: red;
}

svg {
margin: -20px 70px;
}
.dashed{
  stroke-dasharray: 10;

}
.path {
opacity: 0;
}
.path-op {
opacity: 1 !important;
}
.image-cropper {
    background-size: cover;
    background-image: url("/pageassets/test1/ruth.jpg");
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  display: inline-block;
cursor: pointer; 
cursor: hand;
}
.image-cropper {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.image-cropper:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.image-cropper img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.path-animation {
	stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear 1;
opacity: 1;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-cropper abutton slideTextUp">

<div class="rounded bg1"></div>

<div>
<h4 style="font-size: 11px !important;">Person</h4>
<p style="font-size: 11px !important;">Some text about person</p>
</div> 

</div>

<div><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>

<path class="dashed" fill="none" stroke="white" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
	c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
	c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
	c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
	c19.17,28.697,49.512,49.927,78.596,67.591"/>
</svg></div>

＆＃13;

图像悬停会更改背景颜色并添加文本

2 个答案: