CakePHP的改變圖像時鼠標在圖像上

-1

$這 - > HTML->圖像（ 'IMG /按鈕/ shop.png'，
陣列（ 'URL'= > array（'controller'=>'shops'，'action'=>'index'）， 'width'=>'200px'，'class'=>'contshop'））;

CSS：

.contshop：懸停{背景圖像：網址（ 'IMG /按鈕/ shop2.png'）; }

我想將圖片（shop.png）更改爲其他圖片（shop2.png）。但代碼不起作用。任何人都可以幫助我？謝謝

來源

2013-10-17 batrisya

而是拋出'這個 - $>的'共享產生的HTML和CSS的 –

喜，CSS中提到以上（。 contshop）。結果顯示圖像（shop.png），但當鼠標懸停在圖像上時沒有任何事情發生。 – batrisya

恕我直言，懸停確實會改變你的'圖像'元素的背景，但你不能看到它，因爲'shop.png'本身。 – fcalderan

這和CakePHP真的沒什麼關係。你只是試圖做一個CSS懸停，但你混合了HTML圖像和CSS背景圖像。

CSS

a.contshop { 
    display:inline-block; 
    width:200px; 
    height:80px; /* Change to the height of your image */ 
    background:url('../img/button/shop.png') no-repeat; 
} 
a.contshop:hover { 
    background-image:url('../img/button/shop2.png'); 
}

CakePHP的

<?php 
    echo $this->Html->link('', array('controller' => 'shops', 'action' => 'index'), array('class'=>'contshop')); 
?>

你做一個鏈接和圖像設置只是一個CSS背景，然後可以懸停改變。這個特定的例子的問題是你第一次懸停時，第二個圖像加載時（它將被緩存並且不會再次發生），你會得到一個沒有任何東西的短暫閃爍。

改進方案

加入您的兩幅圖像，使它們並排，並保存爲一個圖像。然後使用下面的CSS，懸停改變圖像時，這將防止任何閃爍：

a.contshop { 
    display:inline-block; 
    width:200px; 
    height:80px; /* Change to the height of your image */ 
    background:url('../img/button/shop.png') no-repeat; 
} 
a.contshop:hover { 
    background-position:-200px 0; 
}

來源

2013-10-17 11:15:02 BadHorsie

CakePHP的改變圖像時鼠標在圖像上

回答

相關問題