Not sure what I am doing wrong here.
I am creating a show/hide effect based on adding/removing classes when the user hovers over an element.
I am using a JS hook to do this.
I wrote a simple spike test of what I want to do using JS fiddle.
I wrote the JS Fiddle code and it works as expected in regular JS
Here is the js fiddle: Edit fiddle - JSFiddle - Code Playground
When I set my JS Hook to reflect the JS Fiddle code, the mouseout effect does not work with my Phoenix code and the mouseover effect is unpredictable and does not individuate between some elements
I want to know how to fix this.
Here is my Phoenix Code.
HOOK
InfoColumnHover: {
// https://jsfiddle.net/IrvinDominin/7K2Z3/
mounted() {
let infoButtons = document.getElementsByClassName("info_column");
let infoContents = document.getElementsByClassName("info_content");
for (let i = 0; i < infoButtons.length; i += 1) {
infoButtons[i].addEventListener("mouseover", () => {
infoContents[i].classList.remove("info_content")
infoContents[i].classList.add("show-item")
});
infoButtons[i].addEventListener("mouseout", () => {
infoContents[i].classList.remove("show-item")
infoContents[i].classList.add("info_content")
})
}
}
},
<button id={"info_column_parent#{testbed.id}"} phx-hook="InfoColumnHover" class="info_column">Info</button>
<span>
<span id={"item_#{testbed.id}"} class="info_content">
<ul class="bg-[#fff8c1fc] text-black absolute p-5 outline outline-[#e11d48] outline-1 font-medium">
<li><b>Name:</b> <%= testbed.name %></li>
<hr>
<li><b>Manager:</b> <%= testbed.manager%></li>
<hr>
<li> <b>vNetC Auto Upgrade:</b> <%= testbed.vnetc_auto_upgrade %></li>
<hr>
<li><b>Firmware Auto Upgrade: </b><%= testbed.firmware_auto_upgrade %></li>
<hr>
<li><b>Firmware Version: </b><%= testbed.firmware_version %></li>
<hr>
<li><b>Managed Out of Service: </b><%= testbed.managed_out_of_service %></li>
<hr>
<li><b>DB Backup: </b><%= testbed.db_backup %></li>
<hr>
</ul>
</span>
</span>
CSS
.info_content {
display:none;
}
.show-item{
display:block;
}