- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我在页面左上角有 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" />
关于javascript - 将鼠标悬停在矢量的一部分上时如何放大图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40181498/
我是一名优秀的程序员,十分优秀!