javascript – 当将鼠标悬停在矢量的一部分上时,如何放大图像？

2019年7月28日 181次阅读

我的页面左上角有1个大部分在屏幕外,它可以作为主页按钮.我想在悬停时略微增加它的大小,但是我尝试的任何东西似乎都没有用.

看到图像是一个矢量(感谢上帝)是一个完美的圆圈.因此,使用区域标签,我可以轻松地将其设为主页按钮.现在我想在悬停在该区域标签上时放大图像,我尝试使用”选择器.

我该怎么办？

这是某些上下文的代码段：

.emblem {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: -100px 0px 0px -80px;
  z-index: 2;
  opacity: 0.9;
}
.emblem:hover {
  width: 220px;
  height: 220px;
}
.emblem2 {
  visibility: hidden;
  width: 220px;
  height: 220px;
}
area:hover + .emblem2 {
  visibility: visible;
}
<map name="homemap">
  <area shape="circle" coords="100,100,100" alt="Home button" href="index.html" />
</map>
<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />
<img class="emblem2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />

现在这个工作正常……但只有当我将鼠标悬停在图像的透明部分上时,我想要达到的目标恰恰相反.

最佳答案 您可以尝试仅转换要放大的图像的比例.这样的事情：

.emblem {
  width: 200px;
  height: 200px;
  opacity: 0.9;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);   
}
.emblem:hover{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}
<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />
点赞