Javascript 拆分产品并对其产生悬停效果_Javascript_Jquery_Css

Javascript 拆分产品并对其产生悬停效果

javascript jquery css

Javascript 拆分产品并对其产生悬停效果,javascript,jquery,css,Javascript,Jquery,Css,我想创建一个产品手册，每个产品必须是可点击的。此外，当用户将鼠标悬停在不同的产品上时，它们必须具有悬停效果（以便用户能够理解这是指向此特定产品的链接）我曾尝试用AdobeAcrobatDC Pro创建一个PDF文档，并在每个产品上放置一个链接，但没有任何悬停效果（至少我不能用这个程序创建悬停效果）。所以我觉得PDF不是一个选项，应该用javascript来完成另外，我还找到了一本和我想要的几乎一样的小册子，这样你们就可以在上面看到一个现场演示这里是链接->您的问题非常笼统，但我编写了一个

我想创建一个产品手册，每个产品必须是可点击的。此外，当用户将鼠标悬停在不同的产品上时，它们必须具有悬停效果（以便用户能够理解这是指向此特定产品的链接）

我曾尝试用AdobeAcrobatDC Pro创建一个PDF文档，并在每个产品上放置一个链接，但没有任何悬停效果（至少我不能用这个程序创建悬停效果）。所以我觉得PDF不是一个选项，应该用javascript来完成

另外，我还找到了一本和我想要的几乎一样的小册子，这样你们就可以在上面看到一个现场演示

这里是链接->

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

演示：


函数积（x）{
x、 innerHTML='买我！！'；
}
产品功能（x）{
x、 innerHTML=‘产品1’；
}
函数OpenProduct（）
{
window.location=”http://www.google.com/";    
}
.产品{
高度：50px；
边框：1px纯黑；
边缘底部：10px；
}
.产品：悬停{
背景颜色：蓝色；
颜色：白色；
光标：指针；
}
产品1
产品1
产品1
产品1
产品1

实际上，这个问题非常复杂，因为例如，当您生成一个新的PDF文件时，您没有为每个图像提供不同的div或锚定。例如，使用DevTools->检查此PDF。所以问题是将每个图像分割成不同的div，然后用css/js创建悬停效果。

<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>