Hover Over a Hidden Element to Show It

Hover over a hidden element to show it

Set it to zero opacity instead:

$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

http://jsfiddle.net/mblase75/bzaax/

CSS display hidden element when hover another

By changing your markup slightly you could do something like this.

Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>

<style type="text/css">

body {
    background:#1d2733;
    color:#fff;
    margin:0;
}

#col1 {
    width:300px;
    height:129px;
    float:left; 
    padding-bottom:20px;
}
#col2 {
    width:600px;
    float:right;
    padding-top:150px;
    border-bottom: 2px solid white;
}

#shadowedlinks {
    width:600px;
    float:right;
    position:absolute;
    margin-top:-30px;
    top:0;
}

#shadowedlinks div
{
    display: none;
}

.lnk{
    position:absolute;
    font-size:180px;
    text-align:center;
    font-weight:bold;
    color:#444;
    top: -15px;
    z-index: -1;
}

#links {
    width:600px;
    float:right;
    position:absolute;
    top:0;
    padding-top:100px;
}

#links h1 {
    float:left;
    font-size:30px;
    text-align:center;
    padding:0 20px; 
}
#links a {
    color:#fff;
    text-decoration:none;
}
#links a:hover{
    color:#FF9;
}

#links .lnk
{
    display: none;
}

.link-home:hover ~ #lnkHome,
.link-1:hover ~ #lnk1,
.link-2:hover ~ #lnk2,
.link-3:hover ~ #lnk3
{
    display: block;
}

</style>
</head>

<body>
<div id="col1">
<h1><a href="index.php"><img src="imgs/logo.png" class="logo" border="0" width="250" height="129" /></a></h1>
</div>
<div id="col2">
<div id="links">
    <a class="link-home" href="index.php"><h1>HOME</h1></a>
    <a class="link-1" href="link1.php"><h1>LINK1</h1></a>
    <a class="link-2" href="link2.php"><h1>LINK2</h1></a>
    <a class="link-3" href="link3.php"><h1>LINK3</h1></a>

    <div class="lnk" id="lnkHome">HOME</div>
    <div class="lnk" id="lnk1">LINK1</div>
    <div class="lnk" id="lnk2">LINK2</div>
    <div class="lnk" id="lnk3">LINK3</div>
</div>

I would argue that because the shadow links are positioned absolutely, there is no need for them to have a containing div, so I have removed it.

This allows me to use ~ sibling selector on hover.

JsFiddle

CSS hover not working on hidden elements?

The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).

The solution posted there is also a good alternative for this issue. There are lots of other ways to do it though, such as a div with an image in the background, like:

<style> 
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>

Or if you need to use an image, you can use image sprites (http://www.alistapart.com/articles/sprites)

See basic jsfiddle.

How to show hidden divs on mouseover?

If the divs are hidden, they will never trigger the mouseover event.

You will have to listen to the event of some other unhidden element.

You can consider wrapping your hidden divs into container divs that remain visible, and then act on the mouseover event of these containers.

<div style="width: 80px; height: 20px; background-color: red;"         onmouseover="document.getElementById('div1').style.display = 'block';">   <div id="div1" style="display: none;">Text</div></div>

Hide element on hover of another element

Instead of + you want to use ~ combinator for hide element because + selects only next-sibling

#show {  display: none}#main:hover + #show {  display: block}#main:hover ~ #hide {  display: none}

<div id="main">  Hover me</div><div id="show">  Show me on hover</div><div id="hide">  Hide me on hover</div>

Hover over one element to make a different element visible

First, the function you are looking for is document.getElementsByClassName.
After this you have to select a particular element by index. See this link.

Better would be this solution:
Grab the id of the div (id='b') and set display to block.
As you can see, the div is display:none; at startup.

function showExcerpt() {  document.getElementById('b').style.display = 'block';}

.excerpt-box {  display: none;}

<div class="ind-circle" id="a" onmouseover="showExcerpt()">  <p class="circle-title"> <a href="#">Read more</a></p></div>
<div class="excerpt-box" id="b">  <h1 class="excerpts-title">This is an example excerpt title...</h1>  <img class="excerpts-fi" src="<?php echo BASE_URL . '/assets/images/water.jpg'; ?>" alt="">  <p class="excerpts-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Added hidden element, but now my hover effect doesn't work anymore

your code appears to be essentially working:

https://www.w3schools.com/code/tryit.asp?filename=GMLBBYWJV4I2

<div>

<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>

</div>

<video id="Hvideo" width="320" height="240" controls>
  <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");

function PauseH(){
    Hvideo.pause();
    Hvideo.hidden = true;
}

function PlayH(){
  if(Hvideo.paused) {
    Hvideo.play();
    Hvideo.hidden = false;
  }    
}

</script>

I do wonder if the issue is down to the fact that you need the HTML elements to exist before you run your JavaScript, and it will fail if the JavaScript runs before the elements appear on the page.

Hover Over a Hidden Element to Show It