当我将鼠标悬停在矢量的一部分上时，如何放大图像?

How can I enlarge an image when hovering over part of a vector?

本文关键字：何放大 放大 图像 悬停 鼠标 一部分      更新时间：2023-09-26

我在页面左上角设置了一个按钮，主要是在屏幕外，它的功能是home键。我想稍微增加它的大小时，悬停，但没有我尝试似乎工作。

看到的图像是一个矢量(感谢上帝)是一个完美的圆。有了area标签，我可以很容易地把它做成home键。现在我想放大图像，当鼠标悬停在该区域标签，我已经尝试使用'+'选择器。

我怎么做这样的事情?

这是一个上下文代码片段:

.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" />

使用CSS:

.img-box {
  cursor: pointer;
  height: 110px;
  position: relative;
  width: 110px;
}
.img-link {
  color: #000;
  text-decoration: none;
}
.img-link a,
.img-link a:active,
.img-link a:focus,
.img-link a:hover {
  border-color: transparent;
  color: #000;
  text-decoration: none;
}
.fa-hover {
  bottom: 0;
  font-size: x-large;
  position: absolute;
  right: 0;
}
.fa-hover:hover + .emblem {
  height: 100px;
  width: 100px;
}
.emblem {
  height: 75px;
  width: 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="img-box">
  <a class="img-link" href="https://www.google.ca" target="_window">
    <div class="fa-hover">
      <span class="fa fa-plus"></span>
    </div>
    <img class="emblem" src="https://lh3.ggpht.com/A0x3jzuH1qRkE10HcTiT4qQr_6iAqVg-CTsoIqxnoIFyv92V91WI3KqiVlOvLtfoMRg=w300" />
  </a>
</div>

'+'选择器的缺点是你悬停在'img'标签上方的元素，但是使用css可以移动该图标

相关文章：