Highlighting div element on mouse over with certain class in javascript

Highlighting div element on mouse over with certain class in javascript - javascript

I'm trying to highlight certain div element when mouse hovers over it with spesific class. I want the whole div with class Test to be highlighted on mouse over and none of the children in the div (the span) or the div with class Main.
Currently it highlights anything inside the div on mouse over as well.
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseover", function (event) {
event.target.style.backgroundColor = "#ffcc00";
//some things I tried
//event.target.parentNode.style.backgroundColor = "#ffcc00";
//event.target.childNodes[0].style.backgroundColor = "#ffcc00";
//there will be more stuff in here, triggered by the event
});
}
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseout", function (event) {
event.target.style.backgroundColor = "transparent";
//some things I tried
//event.target.parentNode.style.backgroundColor = "transparent";
//event.target.childNodes[0].style.backgroundColor = "transparent";
//there will be more stuff in here, triggered by the event
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
Thanks for any help!

This is due to event-capturing (a brief description of order here), event bound to the parent element is propagated to the DOM tree beneath.
Simply replace event.target with this.
Demo
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseover", function (event) {
this.style.backgroundColor = "#ffcc00";
});
}
var linkit = document.getElementsByClassName("Test");
for (var i = 0; i < linkit.length; i++) {
linkit[i].addEventListener("mouseout", function (event) {
this.style.backgroundColor = "transparent";
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Why don't you just use css with :hover? That would be much faster.
.Test {
background-color: transparent;
}
.Test:hover {
background-color: #ffcc00;
}

var linkit = document.querySelectorAll(".Test");
function isInside(node, target) {
for (; node != null; node = node.parentNode)
if (node == target) return true;
}
linkit.forEach(function(element) {
element.addEventListener("mouseover", function(event) {
if (!isInside(event.relatedTarget, element))
element.style.backgroundColor = "#ffcc00";
});
element.addEventListener("mouseout", function(event) {
if (!isInside(event.relatedTarget,element))
element.style.backgroundColor = "rgba(255, 255, 255, .4)";
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 540px; top: 0px;">
<div class="Main">
<div class="Test Test0">
<span>Text0</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test1">
<span>Text1</span>
<span>T</span>
<span>A</span>
</div>
<div class="Test Test2">
<span>Text2</span>
<span>T</span>
<span>A</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Related

Hide and display div <li> elements using JS

The first column is displayed by default. If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...". If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2" .....
This is always nested in 3 layers.
The HTML code have to look like as I wrote in my scource code.
It will not be a menu system.
I do not have any idea how to make this work.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
<div id="page">
<iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
</div>
</body>
</html>
table.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
</div>
....
</div>
....
</div>
</div>
</div>
</body>
</html>
style.css
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}

A solution which builds the concept from first class:
var $sel = $(".First li");
var nbr = $sel.length;
var lastval ="";
$sel.clone().appendTo(".Second").clone().appendTo(".Third");
$(".main div:not([class=First])").hide();
$(document).on("click", "li", function() {
var val = $(this).text();
var l = val.length;
if(lastval == val || l > 3) return;
lastval = val;
switch(val.length){
case 1:
$(".main div").show().last().hide();
$(".Second li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
case 3:
$(".Third").show().find("li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
}
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: left;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>

Basically, this is the scrap code where you can start. It is simple logic. The code is creating HTML and changing the other div's HTML.
$(document).ready(function(){
$('body').on('click', 'a', function() {
var number = $(this).html();
var parent = $(this).parent().parent().attr('class');
var htmlss = '';
var i;
if(parent == 'First'){
$('.Second').html('');
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Second').html(htmlss);
}
else if (parent == 'Second'){
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Third').html(htmlss);
}
});
});
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
</body>
</html>

Here is a pure JavaScript solution. I did not touch the HTML as that was declared forbidden, so I had to come up with some js mumbo jumbo to get the initial layout. Following is a working snippet:
function clickMe(id) {
let query;
if (id.length == 1) {
query = document.querySelector(".S_1");
second.style.opacity = 1;
third.style.opacity = 0;
} else if (id.length == 3) {
query = document.querySelector(".T_1").children[0];
selector = ".T_1.1";
third.style.opacity = 1;
}
[...query.children].forEach((node, i) => {
node.innerText = `${id}.${i + 1}`;
});
}
const hideNotUseful = document.querySelector(".S_2").remove();
const first = document.querySelector(".First");
const thirdChild = document.createElement("li");
thirdChild.innerText = 3;
first.append(thirdChild);
const second = document.querySelector(".Second");
const third = document.querySelector(".Third");
second.style.opacity = 0;
third.style.opacity = 0;
[...first.children, ...second.children[0].children].forEach(node => {
node.addEventListener("click", e => clickMe(node.innerText));
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: center;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</div>
</div>
</div>
</div>
</div>

Pomodoro seconds not showing up after first 60 seconds

I was trying out Pomodoro. Please refer to the snippet. The play and stop buttons are working fine but the second's element(var secEl = document.querySelector('.timesec');) doesn't show up after first 60 seconds.
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
The function runs as expected but the seconds, stop showing up after the first 60sec. I assumed something wrong with document.querySelector.
Thank you.
var playEl = document.querySelector('.play');
var secEl = document.querySelector('.timesec');
var minEl = document.querySelector('.timemin');
var stopEl = document.querySelector('.stop')
playEl.addEventListener('click', startTime);
stopEl.addEventListener('click', stopTime);
let counter = 00;
let minCounter = 25;
var secCountDown;
function startTime(){
counter = 60;
secEl.innerHTML = counter;
// console.log('i am clicked', counter)
secCountDown = setInterval( countDown, 1000);
function countDown(){
counter--;
secEl.innerHTML = counter;
//console.log(secEl.innerHTML);
if( counter == 0){
clearInterval(secCountDown);
minCountDown();
// console.log('i am checked')
}
}
}
function minCountDown(){
minCounter --;
minEl.innerHTML = minCounter;
if( minCounter == 0 ){
//console.log('i am checked');
} else
{
startTime();
}
}
function stopTime(){
clearInterval(secCountDown);
minEl.innerHTML = 25;
secEl.textContent = 00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Document</title>
<style type = text/css>
.timerBorder{
border: 1px solid black;
min-height: 280px;
}
.time{
font-size: 60px;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<h1>Pomodoro</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-5">
<div class="mt-4"><button>Working</button><button>Resting</button></div>
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
<div class="mt-4">
<button class="play">Play</button>
<button class="stop">Stop</button>
<button>Pause</button>
</div>
</div>
<div id="time"></div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

This happens because your HTML structure is not suitable for this. The .timemin element is the parent of the .timesec element, so as soon as you set the HTML of the first, the second is destroyed. Once that happens, the reference to the .timesec element is no longer attached to the document, and any update of its HTML has no visual effect any more:
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
Instead, create a separate span for the minutes:
<div class="mt-4">
<span class="timemin">25</span> : <span class="timesec">00</span>
</div>

jQuery multiple sliders

How can I fix the jQuery code below to have multiple sliders working correctly using CSS class names (not IDs) ?
As you can see in the CodePen it's all over the place and not working as expected. The sliders are not working correctly.
CodePen
HTML
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
CSS
.slider {
position: relative;
width: 80%;
}
.slide {
position: absolute;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity:1;
}
JS
var allSlides = $('.slide');
var activeSlide = 0;
setInterval('autoSlide()', 4000);
$(".slider-next").click(function() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
});
$(".slider-prev").click(function() {
if (activeSlide-1 < 0) {
allSlides.eq(0).removeClass("active");
activeSlide = allSlides.length-1;
allSlides.eq(activeSlide).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide--;
allSlides.eq(activeSlide).addClass("active");
}
});
function autoSlide() {
if (activeSlide+1 >= allSlides.length) {
allSlides.eq(activeSlide).removeClass("active");
activeSlide = 0;
allSlides.eq(0).addClass("active");
}
else {
allSlides.eq(activeSlide).removeClass("active");
activeSlide++;
allSlides.eq(activeSlide).addClass("active");
}
}

I was unsure what you are doing with the sliders, but I was able to wire up the handlers and get you going. I set an array for the sliders, then at page load I wire up the handlers to the sliders. When the sliders are clicked, I think you want to loop through your index of sliders and set the css classes to active. I did that here. Be aware that the selection of the slider by index might be null. Tailor the answer to your use.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.slider {
position: relative;
width: 80%;
}
.slide {
position: relative;
opacity: 0;
}
.active {
transition: opacity 500ms ease;
opacity: 1;
}
</style>
<script type="text/javascript">
//set the array to the slide div's we have here
var allSlides = document.getElementsByClassName("slide");
var activeSlide = 0;//start at 0
setInterval('autoSlide()', 4000);
$(function () { //when the document is ready, wire up the click functions
$(".slider-next").click(function () {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className =""; //remove any css class on this item
activeSlide = 0;
allSlides[0].className["active"]; //careful, these items maybe null
}
else {
allSlides[activeSlide].className="";
activeSlide++;
allSlides[activeSlide].className="active";
}
});
$(".slider-prev").click(function () {
if (activeSlide - 1 < 0) {
allSlides[0].className ="";
activeSlide = allSlides.length - 1;
allSlides[activeSlide].className= "active";
}
else {
allSlides[activeSlide].className= "";
activeSlide--;
allSlides[activeSlide].className ="active";
}
});
});
function autoSlide() {
if (activeSlide + 1 >= allSlides.length) {
allSlides[activeSlide].className = "";
activeSlide = 0;
allSlides[0].className ="active";
}
else {
allSlides[activeSlide].className = "";
activeSlide++;
allSlides[activeSlide].className ="active";
}
}
</script>
</head>
<body>
<div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
<div class="slider-btn">
<button class="slider-prev"><</button>
<button class="slider-next">></button>
</div>
<div class="slider">
<div class="slide active">
<h2>Slide 1</h2>
</div>
<div class="slide">
<h2>Slide 2</h2>
</div>
</div>
<div>
<p>Some other content here</p>
</div>
</div>
</body>
</html>

onmouseover event not working

Im making a simple hud that supposed to show itself when your mouse is on the main panel.
For some reason the onmouseover and out not working. When I click inspect element in the browser on the panel it shows me the html tag. I know that the listeners were created, again from looking at the inspect element in the browser.
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
<img src="icons/white/open.png" style="float:right" class="btnMedia" />
</div>
<div id="bottom">
<center>
<img src="icons/white/pre.png" class="leftandright btnMedia" />
<img src="icons/white/play.png" class="leftandright btnMedia" />
<img src="icons/white/next.png" class="leftandright btnMedia" />
</center>
</div>
</div>
</body>
<script>
var panel = document.getElementById("mainpanel");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
//alert("script")
panel.onmouseover = function() {
alert("in")
top.display = "block";
bottom.display = "block";
}
panel.onmouseout = function() {
alert("out")
top.display = "none";
bottom.display = "none";
}
</script>
</html>

There are two things wrong in your code.
Missing style when manipulating with CSS values
And top is a reserved keyword in JavaScript and it's tricky to use it as an variable
This works:
var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
top2.style.display = "block";
bottom.style.display = "block";
}
panel.onmouseout = function() {
top2.style.display = "none";
bottom.style.display = "none";
}
#mainpanel {
background: #faa;
height: 100vh;
}
#top, #bottom {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
I am top!
</div>
<div id="bottom">
I am bottom!
</div>
</div>
</body>
</html>

Draggable Items disable <A HREF> links

I've a problem with my code. I suppose that the draggable items disable the links inside my page.
I've try and I want use this code inside an IOS phonegap app.
The two links inside the "navigation" div appear disabled in IOS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="yes" />
<script type="text/javascript" src="game1js/head.min.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(document).ready(function() { $("#win").delay(13000).fadeOut(3000); });
</script>
<link rel="stylesheet" type="text/css" href="game1css/style.css" />
<style>body {
background-image: url("img/game1_bkg.jpg"); background-repeat:no-repeat; overflow: hidden;
} </style>
</head>
<body>
<div id="touchme1" class="touchBox"><img src="img/game1_1.png"/></div>
<div id="touchme2" class="touchBox"><img src="img/game1_2.png"/></div>
<div id="touchme3" class="touchBox"><img src="img/game1_0.png"/></div>
<div id="touchme4" class="touchBox"><img src="img/game1_3.png"/></div>
<div id="touchme5" class="touchBox"><img src="img/game1_4.png"/></div>
<div id="touchme6" class="touchBox"><img src="img/game1_5.png"/></div>
<div id="touchme7" class="touchBox"><img src="img/game1_6.png"/></div>
<div id="touchme8" class="touchBox"><img src="img/game1_7.png"/></div>
<div id="touchme9" class="touchBox"><img src="img/game1_8.png"/></div>
<div id="touchme10" class="touchBox"><img src="img/game1_9.png"/></div>
<div id="win" style="margin: auto; position: absolute;bottom: 0;left: 0;top: 0;right: 0; z-index:100;"><img src="img/start.png" id="messageWin"></div>
<div id="drop" class="dropArea"><b>Trascina qui i numeri</b><br><div id="n1" style="float:left;"></div><div id="n2" style="float:left;"></div></div>
<script>
head.js("game1js/jquery.min.js","game1js/ui.js","game1js/touch.js", function (){
$("#touchme1, #touchme2, #touchme3, #touchme4, #touchme5, #touchme6, #touchme7, #touchme8, #touchme9, #touchme10").draggable({revert:true});
var sum=0;
$("#drop").droppable({
drop: function( event, ui ) {
console.log($(ui.draggable).attr("id"));
if($(ui.draggable).attr("id")=="touchme1"){
document.getElementById("n1").innerHTML = "<img src='img/game1_1.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")=="touchme9"){
document.getElementById("n2").innerHTML = "<img src='img/game1_8.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")!="touchme1" && $(ui.draggable).attr("id")!="touchme9"){
//$(ui.draggable).remove();
}
if (sum==2){
document.getElementById('messageWin').src="img/end.png";
$("#win").delay(100).fadeIn(3000);
document.getElementById('myAudio').src="../audio/01_end.mp3";
document.getElementById('myAudio').play();
localStorage.setItem('level1', 1);
setTimeout(function() {window.location.href='../index.html';},10000);
}
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#eee'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
}
});
});
</script>
<div style="visibility: hidden;"><audio src="../audio/01_instructions.mp3" autoplay controls="false" id="myAudio"></div>
<div id="navigation" style="z-index:100; position: absolute; top: 650px; left: 455px;">
<img src="../img/left.png" width="64px">
<img src="../img/reload2.png" width="64px">
</div>
</body>
</html>
Do you have an idea to fix the code ?
Thanks.

Develop Reference

JavaScript is the programming language of the Web.

Highlighting div element on mouse over with certain class in javascript - javascript

Why don't you just use css with :hover? That would be much faster. .Test { background-color: transparent; } .Test:hover { background-color: #ffcc00; }

Related

Hide and display div <li> elements using JS

Pomodoro seconds not showing up after first 60 seconds

jQuery multiple sliders

onmouseover event not working

Draggable Items disable <A HREF> links

Categories

Resources