Cakephp 在鼠标悬停在图像上时更改图像答案

【问题标题】：Cakephp to change image when mouse over the imageCakephp 在鼠标悬停在图像上时更改图像
【发布时间】：2013-10-17 19:15:02
【问题描述】：

我有这个代码：

$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）。但是代码不起作用。任何人都可以帮助我吗？谢谢

【问题讨论】：

而不是抛出$this->分享生成的html和css
嗨，上面提到了 css (.contshop)。结果显示图像（shop.png），但是当鼠标悬停在图像上时没有任何反应。
恕我直言，悬停确实会更改您的 image 元素的背景，但由于图像 shop.png 本身，您看不到它。
意思是shop.png隐藏背景？在 cakephp 中更改图像（悬停）的任何想法？

标签： html css image cakephp hover

【解决方案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;
}

【讨论】：