Question

我要创建一个包含产品的小册子，并且每个产品都必须可点击。另外，当用户将鼠标悬停在不同的产品上时，它们必须具有悬停效果（以便用户可以理解这是该特定产品的链接）。

我尝试使用Adobe Acrobat DC Pro创建PDF文档，并在每个产品上都放置了一个链接，但是没有任何悬停效果（至少我无法使用此程序创建悬停效果）。所以我觉得PDF不是一个选择，应该使用javascript完成。

此外，我设法找到了与我想要的小册子几乎相同的小册子，以便你们可以在其上观看实时演示。

这是链接-> https://broshura.bg/aiko/aiko-broshura-do-20-10-19-1

Answer 1

您的问题非常笼统，但我编写了一个快速演示，它将以正确的方式指导您。悬停效果是使用css / javascript完成的。

演示：https://codepen.io/david-somekh/pen/ExxappY

<html>
<script>
function OnProduct(x) {
  x.innerHTML = 'Buy me !! ';
}

function OffProduct(x) {
  x.innerHTML = 'Product 1';
}

function OpenProduct()
{
     window.location = "http://www.google.com/";    
}
</script>
<style>
.product{
height:50px;
border:1px solid black;
margin-bottom:10px;
}
.product:hover{
background-color:blue;
color:white;
cursor:pointer;

}
</style>
<div onmouseover="OnProduct(this)" onmouseout="OffProduct(this)" onclick="OpenProduct()" class="product">Product 1</div>
<div onmouseover="OnProduct(this)" onmouseout="OffProduct(this)" onclick="OpenProduct()" class="product">Product 1</div>
<div onmouseover="OnProduct(this)" onmouseout="OffProduct(this)" onclick="OpenProduct()" class="product">Product 1</div>
<div onmouseover="OnProduct(this)" onmouseout="OffProduct(this)" onclick="OpenProduct()" class="product">Product 1</div>
<div onmouseover="OnProduct(this)" onmouseout="OffProduct(this)"  onclick="OpenProduct()" class="product">Product 1</div>
</html>

拆分产品并对其进行悬停效果

1 个答案: