Mouseover and Mouseout in CSS

MouseOver and MouseOut In CSS

Here is the best solution, i think.

CSS onomouseout:

div:not( :hover ){ ... }

CSS onmouseover:

div:hover{ ... }

It's better, because if you need to set some styles ONLY onmouseout and trying to do this in this way

div { ... }

you will set your styles and for onmouseover too.

mouseover and mouseout events html

This could easily be done with css however per your question here is how you would accomplish this:

<button id="button" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="test()" >Enter</button>

<script>
function mouseOver() {
  document.getElementById("button").style.color = "red";
}

function mouseOut() {
  document.getElementById("button").style.color = "black";
}
</script>

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: Mouseover and mouseout event handlers work, but mouseout doesn't work properly when mouseover is replaced by click

How about this - note I added a class called open

let dropMenu = document.querySelector("#dropMenu");
let navList = document.querySelectorAll("#dropMenu li");
let navDrop = document.querySelector("#navDrop");
let listContainer = document.querySelector("#listContainer");
let navItemNumber = navList.length;

function toggleNav(e) { // called on click AND mouseleave
  const tgt = e.target; // clicked or mouseleave'd object
  const li = document.querySelector(".dropBtn"); 
  if (tgt.id && tgt.id === "dropMenu" && e.type === "mouseleave") {
    li.classList.add("open"); // pretend the li class is open
  }
  const open = li.classList.contains("open"); // is it open?
  [...navList].forEach(nav => nav.classList.toggle("open", !open)); // toggle the class

  if (tgt.tagName === "A" && tgt.closest("li").classList.contains("dropBtn")) {
    li.classList.toggle("open"); // toggle if clicked
  }
}
dropMenu.addEventListener("click", toggleNav);
dropMenu.addEventListener("mouseleave", toggleNav);

.content {
  clear: both;
}

#logo {
  float: left;
  margin: 20px 20px 5px 20px;
  padding: 31px 37px;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
}

.row {
  float: left;
  overflow: unset;
  white-space: nowrap;
  background-color: #d8e9ee;
  width: 100%;
}

.top {
  position: fixed;
}

.menu {
  display: inline-block;
  list-style-type: none;
  margin: 25px 8px 0px 8px;
  padding: 12px 14px;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  font-size: 1.4em;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
}

.menu:hover {
  margin: 24px 8px 0px 6px;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  font-size: 1.45em;
  border-radius: .9em;
  /*transition-duration: 250ms;*/
}

#navDrop {
  position: fixed;
  display: inline-block;
}

#dropMenu {
  font-size: 1.4em;
  border-style: groove;
  border-width: 2px;
  box-shadow: 2px 2px 2px;
  color: rgb(11, 12, 36);
  background-color: #f5f5ed;
  border-radius: 1em;
  margin: 25px 8px 0 8px;
}

#dropMenu:hover {
  font-size: 1.45em;
  border-style: ridge;
  box-shadow: 3px 3px 3px;
  margin: 24px 8px 0px 7px;
  border-radius: .9em;
}

.dropBtn {
  padding: 12px 14px;
}

.dropItem {
  display: none;
  padding: 12px 14px;
}

nav ul li a {
  text-decoration: none;
}

.open {
  display: list-item;
  width: 110px;
}

<ul>
  <li class="menu"><a href="index.html">Home</a></li>
  <li class="menu"><a href="content/tuning.html#tuning">Tuning</a></li>
  <li class="menu"><a href="content/videos.html">Lessons</a></li>
  <li class="menu"><a href="content/tools.html">Tools</a></li>
  <li class="menu"><a href="content/signup.html">Sign Up</a></li>
  <li class="menu"><a href="content/signin.html">Sign in</a></li>
  <li id="navDrop">
    <ul id="dropMenu">
      <li class="dropBtn"><a href="#">More</a></li>
      <li class="dropItem"><a href="content/tuning.html#repairs">Repairs</a></li>
      <li class="dropItem"><a href="content/supplies.html">Supplies</a></li>
      <li class="dropItem"><a href="content/pricing.html">Pricing</a></li>
      <li class="dropItem"><a href="content/services.html">Services</a></li>
      <li class="dropItem"><a href="content/about.html">About</a></li>
      <li class="dropItem"><a href="content/contact.html">Contact</a></li>
    </ul>
  </li>
</ul>

jquery .mouseover() and .mouseout() with fade

You missed the $ into the handlers.

$('#top-slide').bind("mouseenter", function()
{
  $('#select').stop(true).fadeIn(600); //$('#select'), not ('#select')
});

$('#top-slide').bind("mouseleave", function()
{
  $('#select').stop(true).fadeOut(600); //$('#select'), not ('#select')
});

Also, you should add a stop first before your fades, to prevent multiple fadein fadeouts to queue. And, because #select is a child of #top-slide, you should use the events mouseenter and mouseleave instead of mouseover and mouseout. (related to this)

no transition effect on mouse over and mouse out with css

One option would be to toggle a class on mouseover/mouseout:

Updated Example

$('.navButton').on('mouseover mouseout', function () {
    $(this).toggleClass('no-transition');
});

.no-transition {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

You could alternatively, just transition the top property:

Updated Example

.navButton {
    position: absolute;
    top:10px;
    -webkit-transition: top 0.5s ease-in-out;
    -moz-transition: top 0.5s ease-in-out;
    -o-transition: top 0.5s ease-in-out;
    -ms-transition: top 0.5s ease-in-out;
    transition: top 0.5s ease-in-out;
}

How to use mouseover and mouseout in Angular 6

The Angular6 equivalent code should be:

app.component.html

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

app.component.ts

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

Notice that there is no such thing as $scope anymore as it existed in AngularJS. Its been replaced with member variables from the component class. Also, there is no scope resolution algorithm based on prototypical inheritance either - it either resolves to a component class member, or it doesn't.

Mouseover and mouseout colour change of text

No, you can use the :hover pseudo-class like this:

<span class="sometexttohover">This is text to hover over</span>

<style type="text/css">

.sometexttohover {
color: #000;
}

.sometexttohover:hover {
color: #567843;
}

</style>

Mouseover & Mouseout w/ Javascript

When you call an inline event handler such as you do with onmouseover="MouseOver(this);" you're passing a reference to the element itself to your function, and in your function you're taking that reference and assigning it to the variable elem.

You would then normally use elem within your function like elem.style.color = "white";, not with parenthesis, as you're not running a function but rather just changing a property.

function MouseOver(elem) {  elem.style.color = "white";}
function MouseOut(elem) {  elem.style.color = "black";}

<nav id="frame-link">  <a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a></nav>

Mouseover and Mouseout in CSS