html - Cakephp 在鼠标悬停在图像上时更改图像

Question

我有这个代码：

$this->Html->image('img/button/shop.png',
array('url'=>array('controller' => 'shops', 'action'=> 'index'), 'width' =>'200px','class'=>'contshop'));

CSS：

.contshop:hover{ 背景图片: url('img/button/shop2.png'); }

我希望图像（shop.png）更改为其他图像（shop2.png）。但是代码不起作用。任何人都可以帮助我吗？谢谢

Answer 1

这实际上与 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'));
?>

You make a link and set the image as a CSS background only, which can then be changed on hover. The problem with this particular example is on the first time you hover, you will get a short flicker of nothing while the second image loads (it will be subsequently cached and won't happen again).

Improved Solution

Join your two images so that they are side by side, and save as one image. Then use the following CSS, which will prevent any flicker when changing images on hover:

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;
}