Fade Effect on Link Hover

Fade Effect on Link Hover?

Nowadays people are just using CSS3 transitions because it's a lot easier than messing with JS, browser support is reasonably good and it's merely cosmetic so it doesn't matter if it doesn't work.

Something like this gets the job done:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

You can also transition specific CSS properties with different timings and easing functions by separating each declaration with a comma, like so:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Demo here

CSS3 : Fade in on hover and Fade out when hover is gone

CSS Transitions don't work on display:block/none; You can manage to give that effect using visibility/opacity properties.

Check this example, You can manually add the transition-delay property if you really want it to add.

.main_div {  width: 100px;  height: 100px;  border: thin black solid;  position: relative;}
.main_div .overlay_div {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.5);  visibility: hidden;  opacity: 0;  transition: all 1s ease-out;}
.main_div:hover .overlay_div {  visibility: visible;  opacity: 1;  transition: all 1s ease-in;}

<div class="main_div">  <div class="overlay_div">    some text  </div></div>

Trouble with 'fade in' effect on hover over text

You can achieve the fade in effect by playing with opacity property. As for slide effect, you can make use of margin, padding, or the left properties.

In the demo below, I changed padding-left to achieve the slide effect.

.wrapper {  cursor: pointer;  padding-left: 250px;  transition: padding-left 1.3s ease;}
.wrapper:hover {  padding-left: 150px;}
.enterarrow {  background-image: url(http://www.ladrianpop.com/wp-content/uploads/2019/09/Asset-3.svg);  background-repeat: no-repeat;  display: block;  width: 1vw;  height: 1vw;}
.hidden-part {  opacity: 0;  transition: opacity 1.3s ease;}
.wrapper:hover .hidden-part {  opacity: 1;}

<div class="wrapper">  e<span class="hidden-part">xplore</span>  <div class="enterarrow">  </div></div>

How to put the faded hover effect on the button?

You're going to need to use CSS to apply a transition to the anchor. Here's an example:

/* replace 0.5s in each one with the time you want it to take */
a {
    text-decoration: none;
    color: #007edf; /* starting color */
    transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
}

a:hover {
    color: #0069ba; /* ending color */
}

How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

Using jQuery, you could do something like this:

jQuery

$('a.menu-link').hover(function(){
 $('a.menu-link').not(this).toggleClass('toggle');
})

CSS

.toggle {
  opacity: 0.7;
}

Here is a fiddle of it in action: http://jsfiddle.net/HMq67/

Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.

Using CSS to make two links fade in when hovering over a different link

You can't affect siblings if they are before the hovered element in DOM order. Instead, check for the whole list to be hovered, see your updated snippet below.

Further explanation: Starting with your list

<ul>
  <li>
    <a class="homeW" href="#">Writing</a>
  </li>
  <li>
    <a class="homeH" href="#">Home</a>
  </li>
  <li>
    <a class="homeM" href="#">Music</a>
  </li>
</ul>

Your link a.homeH is inside an li element. CSS currently does not support any parent selector. Your selector .homeH:hover .homeW would only affect an element with class .homeW that's a child of another element with class .homeH while being hovered.

Even if your li elements would have the same class, you could only do li.homeH:hovered ~ li.homeM, that would be applied to the Music bullet point (~ is the siblings selector), but it wouldn't work for Writing since that list item is BEFORE the actual home list item.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {  margin: 0;  padding: 0;  border: 0;  outline: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {  display: block;}body {  line-height: 1;}ol,ul {  list-style: none;}blockquote,q {  quotes: none;}blockquote:before,blockquote:after,q:before,q:after {  content: '';  content: none;}ins {  text-decoration: none;}del {  text-decoration: line-through;}table {  border-collapse: collapse;  border-spacing: 0;}/* MY CODE BELOW */
.header {  /* MENU BAR ACROSS THE TOP */  display: flex;  flex-direction: row;  width: 100%;  height: 150px;  background-color: black;  opacity: 0.8;  position: absolute;  left: 0;  align-items: center;}.home {  /* LIST CONTAINER */  border: 1px solid red;  display: flex;  flex-direction: column;  margin-left: 5%;  color: white;  font-family: 'heebo';  font-size: 30px;  text-align: center;  width: 100px;}.home ul {  /* LIST O' LINKS */  width: 100%;  border: 1px solid green;  display: flex;  flex-direction: column;}.homeW {  /* 'WRITINGS' LINK */  border: 1px solid yellow;  text-decoration: none;  opacity: 0;  transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -webkit-transition: opacity 1s ease-in-out;}.homeH {  /* 'HOME' LINK */  border: 1px solid purple;  text-decoration: none;}.homeM {  /* 'MUSIC' LINK */  border: 1px solid pink;  text-decoration: none;  opacity: 0;  transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -webkit-transition: opacity 1s ease-in-out;}.home:hover .homeW {  /* ON 'HOME' HOVER, 'WRITINGS' APPEARS */  opacity: 1.0;  transition: opacity .55s ease-in-out;  -moz-transition: opacity .55s ease-in-out;  -webkit-transition: opacity .55s ease-in-out;}.home:hover .homeM {  /* ...AND SO DOES 'MUSIC' */  opacity: 1.0;  transition: opacity .55s ease-in-out;  -moz-transition: opacity .55s ease-in-out;  -webkit-transition: opacity .55s ease-in-out;}.header a {  /* INKS ARE WHITE (WHEN THEY ARE VISIBLE) */  color: white;}

<div class="header">
  <div class="home">    <ul>      <li>        <a class="homeW" href="#">Writing</a>      </li>      <li>        <a class="homeH" href="#">Home</a>      </li>      <li>        <a class="homeM" href="#">Music</a>      </li>    </ul>  </div></div>

Fade in effect on hover using css?

I think you are looking to animate the opacity, not the background.

Initialize the opacity to 0, setup animations:

opacity: 0;

-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

Set opacity to 1 for a hover:

.third:hover #tooltipbox{
    opacity: 1;
}

http://jsfiddle.net/eypm4v5u/

jQuery fadein image on link hover

Seems like you have some syntax error:

$(document).ready(function() {

$("#pau").mouseover(function(){
    $("#paup").fadeIn(600);
});

$("#pau").mouseout(function(){
    $("#paup").fadeOut(600);
});

});

Working Demo : http://jsfiddle.net/hro1e6kn/

Fade Effect on Link Hover