For work I need to make some HTML5 banners and they are almost done except for 1 thing. I need to code a hover change in the following HTML5 banner. When you hover over the button the background colour of the rectangle need to change from orange to black.
Class gwd-grp-1b38 / ID 'oranje'
But it doesn't work... Any idea how to fix this?
I tried multiple things, even removed the tap area but the colour still didn't change. The text on the button is a svg file because the fonts aren't online fonts, this resulted in making the button like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 15.0.4.1108">
<meta name="template" content="Banner 3.0.0">
<meta name="environment" content="gwd-genericad">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="gwdpage_style.css" rel="stylesheet" data-version="13" data-exports-type="gwd-page">
<link href="gwdpagedeck_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-pagedeck">
<link href="gwdimage_style.css" rel="stylesheet" data-version="17" data-exports-type="gwd-image">
<link href="gwdtaparea_style.css" rel="stylesheet" data-version="7" data-exports-type="gwd-taparea">
<style id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
position: absolute;
transform-style: preserve-3d;
}
.gwd-page-content * {
transform-style: preserve-3d;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
transform: translateZ(0px);
}
.gwd-page-size {
width: 160px;
height: 600px;
}
.gwd-rect-1ll0 {
position: absolute;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
left: 0px;
top: 0px;
width: 160px;
height: 600px;
}
.gwd-image-13h3 {
position: absolute;
width: 135px;
height: 32.96px;
left: 13px;
top: 506px;
}
.gwd-image-qwzt {
position: absolute;
width: 135px;
height: 48.18px;
left: 9px;
top: 157px;
}
.gwd-input-k9vt {
position: absolute;
border: none;
background-image: none;
background-color: transparent;
height: 18px;
width: 100px;
left: 40px;
top: 513px;
}
.gwd-taparea-lspc {
position: absolute;
width: 130px;
left: 15px;
height: 40px;
top: 544px;
}
.gwd-image-1efh {
position: absolute;
left: 9px;
top: 106px;
width: 105px;
height: 18.41px;
}
.gwd-p-16bb {
position: absolute;
font-family: Verdana;
background-image: none;
background-color: transparent;
color: rgb(0, 66, 136);
font-weight: bold;
width: 314px;
line-height: 0px;
letter-spacing: 1px;
height: 10px;
left: 10px;
top: 136px;
font-size: 18px;
}
input:focus::placeholder {
color: transparent;
}
textarea:focus, input:focus {
outline: none;
}
.gwd-image-1i3o {
position: absolute;
width: 160px;
height: 600px;
top: 0px;
left: 1px;
}
.gwd-image-1xcr {
position: absolute;
width: 300px;
height: 420px;
top: 205px;
left: 94px;
transform: translate3d(100px, 0px, 0px);
}
@keyframes gwd-gen-4bzbgwdanimation_gwd-keyframes {
0% {
transform: translate3d(100px, 0px, 0px);
animation-timing-function: ease;
}
100% {
transform: translate3d(-130px, 0px, 0px);
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-4bzbgwdanimation {
animation: 0.7s linear 0s 1 normal forwards running gwd-gen-4bzbgwdanimation_gwd-keyframes;
}
[data-gwd-group="button"] .gwd-grp-1b38.gwd-image-10ho {
position: absolute;
width: 120px;
height: 29.29px;
transform: translate3d(0px, 0px, 0px);
left: 0px;
top: 0px;
}
[data-gwd-group="button"] .gwd-grp-1b38.gwd-rect-361w {
position: absolute;
width: 120px;
height: 29.2857px;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-image-source: none;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;
border-color: transparent;
background-image: none;
background-color: rgb(244, 123, 32);
border-radius: 3px;
left: 0px;
top: 0px;
}
.gwd-rect-361w:hover {
transition: all 0.2s ease 0s;
background-color: rgb(0, 0, 0) !important;
}
[data-gwd-group="button"] {
width: 120px;
height: 29.2857px;
}
.gwd-div-ap9v {
position: absolute;
left: 20px;
top: 550px;
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
}
@keyframes gwd-gen-1e3ngwdanimation_gwd-keyframes {
0% {
transform: scale3d(1, 1, 1);
animation-timing-function: linear;
}
18.1818% {
transform: scale3d(1, 1, 1);
animation-timing-function: ease;
}
22.7273% {
transform: scale3d(1.1613, 1.1613, 1);
animation-timing-function: ease;
}
27.2727% {
transform: scale3d(1, 1, 1);
animation-timing-function: linear;
}
54.5455% {
transform: scale3d(1, 1, 1);
animation-timing-function: ease;
}
59.0909% {
transform: scale3d(1.1613, 1.1613, 1);
animation-timing-function: ease;
}
63.6364% {
transform: scale3d(1, 1, 1);
animation-timing-function: linear;
}
90.9091% {
transform: scale3d(1, 1, 1);
animation-timing-function: ease;
}
95.4545% {
transform: scale3d(1.1613, 1.1613, 1);
animation-timing-function: ease;
}
96.5455% {
transform: scale3d(1.099, 1.099, 1);
animation-timing-function: ease;
}
100% {
transform: scale3d(1, 1, 1);
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-1e3ngwdanimation {
animation: 5.5s linear 0s 1 normal forwards running gwd-gen-1e3ngwdanimation_gwd-keyframes;
}
</style>
<script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_v1_min.js" data-version="2" data-exports-type="gwd_webcomponents_v1" src="gwd_webcomponents_v1_min.js"></script>
<script data-source="gwdpage_min.js" data-version="13" data-exports-type="gwd-page" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="14" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script>
<script data-source="gwdimage_min.js" data-version="17" data-exports-type="gwd-image" src="gwdimage_min.js"></script>
<script data-source="gwdtaparea_min.js" data-version="7" data-exports-type="gwd-taparea" src="gwdtaparea_min.js"></script>
<script type="text/javascript" src="../../GWD/160x600/assets/get_variables.js"></script>
<script>
window.adcombi.getFeed(adcombi.feedUrl)
</script>
<script data-source="gwdgenericad_min.js" data-version="8" data-exports-type="gwd-genericad" src="gwdgenericad_min.js"></script>
<script type="text/javascript" src="groups_runtime.min.1.0.js" gwd-groups-version="1.0"></script>
<script type="text/javascript" src="gwdid.min.1.0.js" gwd-gwdid-version="1.0"></script>
<script type="text/javascript" gwd-events="support" src="gwd-events-support.1.0.js"></script>
<script type="text/javascript" gwd-events="handlers">
gwd.auto_Gwd_taparea_1Action = function(event) {
// GWD Predefined Function
gwd.actions.gwdGenericad.exit('gwd-ad', 'https://www.kwik-fit.nl/apk.go?kenteken=%5Bkenteken%5D', true, 'page1');
};
</script>
<script type="text/javascript" gwd-events="registration">
// Ondersteuningscode voor gebeurtenisverwerking in Google Web Designer
// Dit scriptblok is automatisch gegenereerd. Bewerk dit niet.
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-taparea_1', 'action', gwd.auto_Gwd_taparea_1Action, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>
</head>
<body>
<template id="gwd-group-definitions">
<div data-gwd-group-def="button" data-gwd-group-class="gwd-grp-1b38" style="display: none;">
<svg data-gwd-shape="rectangle" class="gwd-rect-361w gwd-grp-1b38" data-gwd-grp-id="oranje"></svg>
<gwd-image source="assets/button-text.svg" scaling="stretch" class="gwd-image-10ho gwd-grp-1b38" data-gwd-grp-id="button"></gwd-image>
</div>
</template>
<gwd-genericad id="gwd-ad">
<gwd-pagedeck class="gwd-page-container" id="pagedeck">
<gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="160px" data-gwd-height="600px">
<div class="gwd-page-content gwd-page-size">
<gwd-image id="Achtergrond_KF_HTML_Banners_APK_zonder_man-5" source="assets/Achtergrond KF HTML Banners APK zonder man-5.jpg" scaling="stretch" class="gwd-image-1i3o" data-gwd-tl-locked=""></gwd-image>
<gwd-image id="Man" source="assets/Man.png" scaling="stretch" class="gwd-image-1xcr gwd-gen-4bzbgwdanimation" data-gwd-tl-locked=""></gwd-image>
<gwd-image id="kenteken" source="assets/Assets-kenteken.svg" scaling="stretch" class="gwd-image-13h3" data-gwd-tl-locked=""></gwd-image>
<gwd-image id="je-apk" source="assets/je-apk.svg" scaling="stretch" class="gwd-image-1efh" data-gwd-tl-locked=""></gwd-image>
<p class="gwd-p-16bb" data-gwd-tl-locked="">Plaatsnaam?</p>
<gwd-image id="altijd-snel-300-600" source="assets/Assets-altijd-snel-300-600.svg" scaling="stretch" class="gwd-image-qwzt" data-gwd-tl-locked=""></gwd-image>
<svg data-gwd-shape="rectangle" class="gwd-rect-1ll0" data-gwd-tl-locked=""></svg>
<div class="gwd-div-ap9v gwd-gen-1e3ngwdanimation" data-gwd-group="button" id="knop"></div>
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-lspc" data-gwd-tl-locked=""></gwd-taparea>
<input type="text" id="textfield" class="gwd-input-k9vt" placeholder="Jouw kenteken" style="text-align: center; text-transform: uppercase; font-weight: bold; font-size: 11px;" data-gwd-tl-locked="">
</div>
</gwd-page>
</gwd-pagedeck>
</gwd-genericad>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
requestAnimationFrame(function() {
setTimeout(function() {
gwdAd.initAd();
}, 1);
});
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>