使其他元素移動的懸停效果

任何人都可以提供幫助。我有一隻蝴蝶的圖像，當它懸停時彈出一點。我也有一個毛蟲的形象。麻煩的是，當蝴蝶徘徊在其他圖像也在移動。我怎麼能阻止這個？使其他元素移動的懸停效果

的CSS是

/*Pink Butterfly - header*/ 
.pinkbutterfly { 
    width: 80px; 
    height: 80px; 
    overflow: hidden; 
    position: relative; 
    top:-30px; 
    left:230px; 
    } 

.hoverimg:hover{ 
    width: 95px; 
    height: 95px; 
    position: relative; 
    top:-30px; 
    left:220px; 
    } 

/*Blue/Yellow Caterpillar - header*/ 
.blueyellowcaterpillar{ 
    width: 140px; 
    height: 80px; 
    overflow: hidden; 
    position: relative; 
    top:30px; 
    left:550px 
    }

HTML：

<div id="headercontent"> 
    <img src="nurserylogo.png" alt="Cassiltoun Stables Nursery Logo" class="nurserylogo"> 
    <img src="Edited Characters/pinkbutterfly.png" alt="pinkbutterfly" class="pinkbutterfly hoverimg"> 
    <img src="Edited Characters/blueyellowcaterpillar.png" alt="blueyellowcaterpillar" class="blueyellowcaterpillar choverimg"> 
    <p style="font-family:'FeltTip'">Tel: 0141 631 5235</p> 
    <div id="navigation"> 
    <ul class="navlist"> 
     <li> about </li> 
     <li> pictures </li> 
     <li> find us </li> 
     <li> contact</li> 
    </ul> 
    </div> 
</div>

來源

2013-06-12 user2478632

不應該'類= 「blueyellowcaterpillar choverimg」>'是'類= 「blueyellowcaterpillar hoverimg」>'。另外，你應該用'css'標記這個。 – Ford

我改變了它，因爲毛毛蟲圖像需要做同樣的效果，但使用不同的設置。這更多的是讓蝴蝶在不中斷頁面上的其他任何事情的情況下移動。 – user2478632

改變元件的尺寸使得佈局重新排列。

爲了讓更多的沒有afecting佈局，儘量

.hoverimg:hover { 
    -webkit-transform: scale (1.2); 
    transform: scale (1.2); 
}

這應該使它更大，保持它在以前的位置爲中心。如果這不是你想要的，加上

-webkit-transform-origin (top, center); 
    transform-origin (top, center);

來源

2013-06-12 18:31:09 vals

使其他元素移動的懸停效果

回答

相關問題