文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >图像悬停改变背景颜色并添加文本

问图像悬停改变背景颜色并添加文本
EN

Stack Overflow用户
提问于 2016-11-11 15:42:39
回答 2查看 45关注 0票数 0

我有一个圆圈形状的图像，当你悬停在它上面，我希望背景改变为一个坚实的颜色和文字出现。到目前为止，这就是我所拥有的，它是一种作品，但是坚实的背景从正方形开始变成一个圆形，而不仅仅是圆形颜色的变化？

谢谢

​

代码语言：javascript
复制
$( 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);
});

});
代码语言：javascript
复制
.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;
  }
}
代码语言：javascript
复制
<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>

​

javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-11-11 15:47:33

问题在于，您有一个0.3秒的动画绑定到.slideTextUp div

​

代码语言：javascript
复制
$( 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);
});

});
代码语言：javascript
复制
.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;
  }
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2016-11-11 15:46:57

因为您的过渡动画触发了所有。

只需将“所有”改为“背景色”即可。

这是你想要的吗？

​

代码语言：javascript
复制
$( 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);
});

});
代码语言：javascript
复制
.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;
  }
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40551380

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档