將鼠標懸停在矢量的一部分上時，如何放大圖像？

Question

我的頁面左上角有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" /> 

現在這個工作正常......但只有當我將鼠標懸停在圖像的透明部分上時，我想要達到的目標恰恰相反。

Answer 1

您可以嘗試僅轉換要放大的圖像的比例。 這樣的事情：

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

Answer 2

使用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可以移動圖標。