Question

我有这个HTML代码，它完美无缺：

<a href="www.link.com"><img onmouseover="this.src='http://www.example.com.img1.jpg';" onmouseout="this.src='http://www.example.com.img2.jpg';" src="http://www.example.com.img2.jpg" alt="ALT Text" class="img-responsive"/></br></a>

我想在PHP中添加此代码，并使用以下变量替换链接和图像网址：$ link，$ image_src1和$ image_src2。

我试过这段代码：

<a href=".$link."><img onmouseover="this.src='.$image_src1.';" onmouseout="this.src='.$image_src2.';" src=".$image_src2." alt="ALT Text" class="img-responsive"/></br></a>

我想我无法管理如何使用引号，因此，我收到了错误。

提前谢谢！

Answer 1

谢谢@Muhammad我设法使用CSS和：hover

这是我的代码，以防有人需要它：

    echo '<div class="effect">';
    echo '<img class="image" src="'.$image_src.'';
    echo '<img class="image hover" src="'.$image_src2.'';
    echo '</div>';

CSS：

.effect img.image{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}

Answer 2

试试这个：

$link = 'http://www.google.com';
$image_src1 = "https://image.flaticon.com/icons/svg/148/148766.svg";
$image_src2 = "https://image.flaticon.com/icons/svg/149/149147.svg";
echo '<a href="'.$link.'"><img onmouseover="this.src='.$image_src1.';" onmouseout="this.src='.$image_src2.';" src="'.$image_src2.'" alt="ALT Text" class="img-responsive"/></br></a>';

但是你真的需要查看代码逻辑，以便鼠标悬停/退出。您可以使用CSS :hover属性以简单而优雅的方式实现相同的逻辑。

PHP echo和onmouseover

2 个答案: