Want to make an HTML button within a Popup widget darken when it is hovered over, and have it emulate the appearance of being physically pressed down.
by
I have a FeatureLayer in my web app that contains tiles representing land units. When clicking on one, this Popup shows up:
The "Get Parcel Detail" button is a recreation of this original button from a previous version of my web app:
The original button darkens like this when the cursor hovers over it:
The original button has a sort of 3D appearance of being physically pressed down when the mouse button is held down on it:
I'm trying to recreate this behavior for my new button in my Popup; however, nothing has worked so far. I added the Popup's text and button like so:
export function formatContent(event: { graphic: { attributes: any; }; }) {
const attributes = event.graphic.attributes;
let text = "";
// Only display the attributes if they exist
text += attributes.UseType ? `<b>Use: </b>${attributes.UseType}` : "";
text += attributes.UseDescription ? `; ${attributes.UseDescription}<br>` : "<br>";
text += attributes.SitusAddress ? `<br><b>Address:</b><br>${attributes.SitusAddress}<br>` : `<br><b>Located in: </b>${attributes.TaxRateCity}`;
text += attributes.SitusCity ? `${attributes.SitusCity}` : "";
text += attributes.SitusZIP ? ` ${attributes.SitusZIP.substring(0, 5)}<br>` : "<br>";
text += `<br><a
role="button"
button id="navigate-button"
class="btn btn-default"
style="
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
color: #000;
background-color: #f8f9fa;
border: 1px solid #343a40;
border-radius: 4px;
transition: background-color 0.3s ease;
"
onmouseover="this.style.backgroundColor='#e2e6ea';"
onmouseout="this.style.backgroundColor='#f8f9fa';"
onmousedown="this.style.backgroundColor='#ced4da';"
onmouseup="this.style.backgroundColor='#e2e6ea';"
>Get Parcel Detail</a>`;
const textContent = new TextContent({
text: textElement.innerHTML
});
return [textContent];
}
I tried using the onmouse* events to at least emulate the darkening effect, but it seems like my program is not responding to those events, or any of the CSS styling code that I've tried to use, whether I add the CSS code to a separate .css file which I import, or inject directly into the HTML code. I've tried the following code between "Get Parcel Detail</a>" and "const textContent":
I tried using the onmouse* events to at least emulate the darkening effect, but it seems like my program is not responding to those events, or any of the CSS styling code that I've tried to use, whether I add the CSS code to a separate .css file which I import, or inject directly into the HTML code. I've tried the following code between "Get Parcel Detail</a>" and "const textContent":
const textElement = document.createElement('div');
textElement.innerHTML = text;
const navigateButton = textElement.querySelector('#navigate-button');
if (navigateButton) {
navigateButton.addEventListener('mouseover', function(this: HTMLAnchorElement) {
this.style.backgroundColor = '#e2e6ea';
});
navigateButton.addEventListener('mouseout', function(this: HTMLAnchorElement) {
this.style.backgroundColor = '#f8f9fa';
});
navigateButton.addEventListener('mousedown', function(this: HTMLAnchorElement) {
this.style.backgroundColor = '#ced4da';
});
navigateButton.addEventListener('mouseup', function(this: HTMLAnchorElement) {
this.style.backgroundColor = '#e2e6ea';
});
}
but that does not work either.
1 Solution
Accepted Solutions
