CSS Hover VS. JavaScript Mouseover

CSS hover vs. JavaScript mouseover

The problem with :hover is that IE6 only supports it on links. I use jQuery for this kind of thing these days:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

Makes things a lot easier. That'll work in IE6, FF, Chrome and Safari.

Hover through js or css?

You'd normally use CSS simply because CSS was meant for this kind of stuff. With the JS/jQuery version is more code and it implies running the JS engine and the CSS engine. With CSS, it's just the CSS engine. To recap, the JS version will still need the CSS version.

There are times, though, when you'll want to modify styles from JS, but usually for interactions more complex than a simple hover. Even then though, you would want to use JS just to change just the CSS class, and add styles based on those CSS classes.

Let me give you a couple simple examples:

1. Change text color on hover

CSS properties to change: color.

You'd use CSS here. In the old days this was possible just for anchor elements, so you'd have used JS here for browser like IE6. This is no longer the case though, so a pure CSS solution is fine.

2. Show a tooltip on hover

CSS properties to change: display, top, left, right, bottom.

You most likely want to use JS here. The tooltip markup isn't probably a child of the hovered element, so you can't reference it in your CSS. You may go with a CSS-only solution, but that requires that every element with a tooltip to encompass markup for that tooltip. A lot of redundant elements.

JS is also needed here to calculate the exact position of the toolip relative to the element and/or cursor.

Note that this is an example where you can't use a CSS class for the listed properties. You will style the look & feel of the tooltip in CSS, but the actual positioning has to be done in JS.

Using mouseover and mouseout instead of :hover

The performance depends on the individual user's computer. You will most likely not see any difference whatsoever on any machine unless JavaScript is disabled. You may wish to consider including some CSS that will will compensate for this in the unlikely event that the user has JavaScript disabled.

Javascript+Css, request solution: mouseover hover displays div, stays active until mouseoff/click closes

tl;dr

You need also function to remove the info tabs on mouseout. They won't automagically "un-onmouseover" themselves :-) And while doing that, also remove .active class;

Working code:

function infoBox(event, tabID) {

//declare variables of i=data, tabcontent=blurb, tablinks=buttons

    var i, tabcontent, tablinks;

// find variable=tabcontent as anything with class 'tabcontent'

    tabcontent = document.getElementsByClassName("tabcontent");

// hide variables of tabcontents   

    for (i = 0; i < tabcontent.length; i++) {

        tabcontent[i].style.display = "none";

    }

// find variable=tablinks as anything with class 'tablinks'    

    tablinks = document.getElementsByClassName("tablinks");

// remove active status of tablinks   

    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].className = tablinks[i].className.replace(" active", "");

    }

// show the current onmouseover tab

    document.getElementById(tabID).style.display = "block";

// related named target of event infobox, activate and show   

    event.currentTarget.className += " active";

}

function closeInfoBox() {

 var tabcontent = document.getElementsByClassName("tabcontent");

    // hide tabcontents   

    for (i = 0; i < tabcontent.length; i++) {

        tabcontent[i].style.display = "none";

    }

    // remove also active class

    var tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].className = tablinks[i].className.replace(" active", "");

    }

}

.tabcontainer {

    clear: both;

    border-top: 1px solid #BB8571;

    margin-top: 10px;

    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    min-height:200px;

}

/* Style the tabs*/

.tabcontainer button {

    display:block;

    width:20%;

    float:left;

    text-align:center;

    padding: 1em;

    -webkit-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    -moz-box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    box-shadow: inset 0px 8px 5px -3px rgba(0,0,0,0.1);

    font-family: "Century Gothic", Verdana, Geneva, sans-serif;

    letter-spacing: 0.2em;

    border: 1px solid grey;

    outline: none;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

    transition: all .5s;

}

.tabcontainer button:nth-child(even) {background:#d7b8ac;}

.tabcontainer button:nth-child(odd) {background:#f4dac3;}

/* Change background color of tabs on hover and maintain change while active */

.tabcontainer button:hover, .tabcontainer button.active {

    background-color:#fff;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 0px;

}

/*specific corner tab styling*/

.tabcontainer button:nth-child(1) {

    -webkit-border-bottom-left-radius: 25px;

    -moz-border-radius-bottomleft: 25px;

    border-bottom-left-radius: 25px;

}

.tabcontainer button:nth-child(5) {

    -webkit-border-bottom-right-radius: 25px;

    -moz-border-radius-bottomright: 25px;

    border-bottom-right-radius: 25px;

    }

/* Style the infoboxes */

.tabcontent {

    display:none;

    background-color:tan;

    padding:2em 1em 1em;

    height:170px;

    -webkit-border-bottom-left-radius: 25px;

    -moz-border-radius-bottomleft: 25px;

    border-bottom-left-radius: 25px;

    -webkit-border-bottom-right-radius: 25px;

    -moz-border-radius-bottomright: 25px;

    border-bottom-right-radius: 25px;

    -webkit-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);

    -moz-box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);

    box-shadow: inset 0px -5px 5px 3px rgba(0,0,0,0.1);

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <div class="tabcontainer"> <!––wraps around both tabs and info boxes-->

 <!––below: bar of button tabs--> 

<button class="tablinks" id="t1" onmouseover="infoBox(event, 'b1')" >b1</button>

      <button class="tablinks" id="t2" onmouseover="infoBox(event, 'b2')" >b2</button>

      <button class="tablinks" id="t3" onmouseover="infoBox(event, 'b3')" >b3</button>

      <button class="tablinks" id="t4" onmouseover="infoBox(event, 'b4')" >b4</button>

      <button class="tablinks" id="t5" onmouseover="infoBox(event, 'b5')" >b5</button>

<div id="b1" class="tabcontent" onmouseleave="closeInfoBox()">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>

<div id="b2" class="tabcontent" onmouseleave="closeInfoBox()">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p> 

</div>

<div id="b3" class="tabcontent" onmouseleave="closeInfoBox()">

  <h3>LA</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

<div id="b4" class="tabcontent" onmouseleave="closeInfoBox()">

  <h3>NYC</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

<div id="b5" class="tabcontent" onmouseleave="closeInfoBox()">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

</div>

</body>

</html>

onmouseover is overridding a:hover in CSS

Could the JavaScript associated with the onmouseover/onmouseout
cancel out the CSS a:hover effect?

Yes

$( "div" ).mouseover(function() {

   // uncomment and run again to see how mouseover overrides hover

  // $("div").css({ 'background-color' : 'white'})

});

div {

  width: 300px;

  height: 400px;

  background-color: red;

  

}

div:hover {

  background-color: green;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>

</div>

Hover on mouse-over, un-hover on mouse-out of parent

Here is an approach that uses a little hack to simulate the preserve hover state thing. It does not keep it forever but for the duration you define as animation-delay. Probably 10 minutes of hovering is like forever in most scenarios, if you want to make it last longer you would just have to increase the number in the code below.

.row {

  border: 1px solid orange;

  display: block;

  height: 20%;

  padding: 20px;

  width: 400px;

}

.row div {

  border: 1px dashed blue;

  display: inline-block;

  text-align: center;

  padding: 20px;

  width: 100px;

}

.row .right {

  background: blue;

  padding: 20px 0;

  transition: width 0.5s ease 600s;

  width: 10px; /* Unfortunately, this has to be 'different' from ... */

}

.row .right:hover {

  width: 100px;

  transition: 0.5s;

}

.row:not(:hover) .right {

  width: 10.01px; /* ... this width. See http://stackoverflow.com/q/43393653 */

  transition: 0.5s ease;

}

<div class="row">

  <div class="left"></div>

  <div class="middle"></div>

  <div class="right"></div>

</div>

How to add hover effect upon mouseover to all divs on a page?

The immediate problem you are having is that this is only querying, and subsequently adding an event listener to, one element.

const smallBox = document.querySelector('.smallBox');

smallBox.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
});

In the above portion of your code, querySelector only returns the first matching element. You may be looking for querySelectorAll here which returns a NodeList of matching elements.

You have two options (perhaps others if you want to restructure your code further). The naive approach is to, in fact, query for all of the cells and add event listeners to each of them.

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {

    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {

        bigContainer.innerHTML+='<div class="smallBox">';

    }

}

const smallBoxes = document.querySelectorAll('.smallBox');

[...smallBoxes].forEach(smallBox => {

  smallBox.addEventListener('mouseover', () => {

      smallBox.classList.add('permahover');

  });

})

.smallBox {

    border: 1px solid black;

    width: 20px;

    height: 20px;

    display: inline-block;

}

.permahover {

    background: red;

}

h1 {

    text-align: center;

}

.bigContainer {

    text-align: center;

}

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>

<div class="bigContainer">

</div>

Mouseover or hover vue.js

There's no need for a method here.

HTML

<div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

new Vue({
  el: 'body',
  data: {
    active: false
  }
})

How do I listen to mouseover and mouseout events in 3 elements in a more DRY way?

One way to do what you are seeking is to add a class to everything you want to make hoverable and use querySelectorAll. Here is what the html will look like:

<nav class="header-menu">
  <div class="hoverable headerHome"><a href="/index.html">Home</a></div>
  <div class="hoverable headerPlayground"><a href="/playground.html">Playground</a></div>
  <div class="hoverable headerAbout"><a href="/about.html">About</a></div>
</nav>

And your JavaScript will look like this:

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

Keep your CSS the same.

This works, but the far simpler way is to update your css to use the :hover pseudo class like this:

.header-menu a:hover {
    transform: scale(1.1);
    padding-right: 4em;
}

This does what you want without having to add JavaScript at all.

CSS Hover VS. JavaScript Mouseover