PHP 回显和鼠标悬停

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 和图像 url：$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

试试这个：

$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>';

但是您确实需要查看您的代码逻辑，mouseover/out。您可以使用 CSS :hover 属性以简单而优雅的方式实现相同的逻辑。

Answer 2

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

PHP 回显和鼠标悬停

PHP echo and onmouseover

echo

onmouseover

onmouseout