Question

我有这段代码：

$这 - ＆GT; HTML-＆GT;图像（ 'IMG /按钮/ shop.png'，
array（'url'=＆gt; array（'controller'=＆gt;'shops'，'action'=＆gt;'index'）， 'width'=＆gt;'200px'，'class'=＆gt;'contshop'））;

的CSS：

.contshop：hover {background-image：url（'img / button / shop2.png'）; }

我想将image（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'));
?>

您创建一个链接并将图像设置为仅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;
}

当鼠标悬停在图像上时，Cakephp可以更改图像

1 个答案: