如何在邊界懸停後停止圖像移動？

我有3個圖像，我通過CSS編碼有邊界懸停。它很簡單，很好，但懸停時圖像保持移動。如何在邊界懸停後停止圖像移動？

http://coreneto.com/rental/static/dist/img/cam.jpg http://coreneto.com/rental/static/dist/img/car.jpg http://coreneto.com/rental/static/dist/img/phone.jpg

這裏是現場：JSfiddle

下面是代碼：

<center> 
    <a class="round" href="http://coreneto.com/rental/cars"><img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200"></a>&nbsp;&nbsp; 
    <a class="round" href="http://coreneto.com/rental/cars"><img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200"></a>&nbsp;&nbsp; 
    <a class="round" href="http://coreneto.com/rental/tickets"><img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200"></a> 
</center>

這裏是CSS：

a.round:hover {border: 5px solid #005FD0; display: inline-block; position: static; 
    cursor: pointer; }

什麼是正確的CSS方法我需要使用，以保持他們在的地方hovring什麼時候？

來源

2016-03-23 StackBuck

另外值得注意你想在懸停元素的顯示屬性更改 - 這是最好的設置這個元素本身就避免突然變動，因爲您的顯示類型與您的懸停效果無關。 – Doidgey

@Doidgey相同。其實，我會說你想改變懸停的唯一的東西是'border-color'。你不想改變'border-width'，'border-style'，'display'，'position'或'cursor'（光標已經代表了只有當你的鼠標懸停在它上面時纔會生效的東西）把它放在懸停規則裏只是多餘的） – Katana314

我完全同意。 – Doidgey

您可以使用box-shadow：

img:hover { 
 
    -webkit-box-shadow: 0px 0px 0px 5px #005FD0; 
 
    -moz-box-shadow: 0px 0px 0px 5px #005FD0; 
 
    box-shadow: 0px 0px 0px 5px #005FD0; 
 
}

<center> 
 
    <a class="round" href="http://coreneto.com/rental/cars"> 
 
    <img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200"> 
 
    </a>&nbsp;&nbsp; 
 
    <a class="round" href="http://coreneto.com/rental/cars"> 
 
    <img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200"> 
 
    </a>&nbsp;&nbsp; 
 
    <a class="round" href="http://coreneto.com/rental/tickets"> 
 
    <img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200"> 
 
    </a> 
 
</center>

來源

2016-03-23 17:22:51

是的。你的解決方案做得稍微！ https://jsfiddle.net/rami7250/9bgvuq19/ – StackBuck

給非懸停狀態的透明邊框：

a.round { 
    border: 5px solid transparent; 
    display: inline-block; 
    position: static; 
    cursor: pointer; 
}

jsFiddle example

還請注意，你可能想給圖像vertical-align:top;規則刪除它們下面的差距。請不要使用<center>元素。

來源

2016-03-23 17:18:52 j08691

在我回答完我的問題之前，你已經得到了我。 – StackBuck

-1

我花了一些時間，但在這裏它是：

住在這裏：JSfiddle

<center> 
<a class="round" href="http://coreneto.com/rental/cars"> 
<div class="banner"> 
</div> 
</a> 
<a class="round" href="http://coreneto.com/rental/cars"> 
<div class="banner1"> 
</div></a> 
<a class="round" href="http://coreneto.com/rental/cars"> 
<div class="banner2"> 
</div> 
</a> 
</center>

和

a {decoration:none} 

div:hover{border: 5px solid #005FD0;} 

.banner , .banner1, .banner2 { 
    cursor: pointer; 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 200px; 
    height: 200px; 
    padding-left: 20px; 
    } 

.banner {background: url(http://coreneto.com/rental/static/dist/img/cam.jpg) no-repeat center center;} 

.banner1 {background: url(http://coreneto.com/rental/static/dist/img/car.jpg) no-repeat center center;} 

.banner2 {background: url(http://coreneto.com/rental/static/dist/img/phone.jpg) no-repeat center center;}

來源

2016-03-23 17:19:42 StackBuck

的選擇是給原來的透明邊框：

border: 5px solid transparent;

編輯：有人在我面前。對不起

來源

2016-03-23 17:21:11

如何在邊界懸停後停止圖像移動？

回答

相關問題