Разделите продукты и сделайте на них эффект наведения - PullRequest
Новая
       1

Разделите продукты и сделайте на них эффект наведения

0 голосов
/ 08 октября 2019

Я хочу создать брошюру с продуктами, и каждый продукт должен быть кликабельным. Кроме того, когда пользователь наводит курсор на разные продукты, он должен иметь эффект наведения (чтобы пользователь мог понять, что это ссылка на этот конкретный продукт).

Я пытался создать PDF-документ с помощью Adobe Acrobat DC Proи поместите ссылку на каждый продукт, но эффект наведения отсутствует (по крайней мере, я не могу создать эффект наведения с помощью этой программы). Так что у меня есть ощущение, что PDF не вариант, и это должно быть сделано с помощью javascript.

Кроме того, мне удалось найти брошюру, которая почти такая же, как я хочу, чтобы вы, ребята, могли увидетьживое демо на нем.

Вот ссылка -> https://broshura.bg/aiko/aiko-broshura-do-20-10-19-1

1 Ответ

0 голосов
/ 08 октября 2019

Ваш вопрос очень общий, но я написал небольшую демонстрацию, которая поможет вам правильно. Эффект наведения мыши выполняется с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...