How to Display Block Div on Hover a Tag

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

How to display a div on hover on another div

You want one of the sibling selectors. General sibling ~ or next sibling +

.ClildDiv1:hover ~ .ChildDiv2 {
    display: block;
}

See fiddle here

Or, the parent hover for any child div would be

.Parent:hover > div {
  display: block;
}

made a div display:block with onmouseover() but i can't click on it becasue as soon as I move my mouse away it disappears because of onmouseout()

You can do it without any js, take a look at below snippet.

let target = document.getElementById('target');

function showLog() {
  target.style.display = 'block';
}

function hideLog() {
  target.style.display = 'none';
}

.wrapper {
  background: #eee;
}

.wrapper .inner-content {
  display: none;
  position: absolute;
  background: red;
}

<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
  I am the wrapper
  <div class="inner-content" id="target">
    <p>Here is some content inside wrapper element</p>
  </div>
</div>

How to display a div when hovering over an image using CSS/HTML + Transitions?

The hover effect is not mobile-friendly (though there are more and more 'hover-sensitive' devices).
To accomodate most devices I often use both :hover and :focus to 'dropdown' things. However, this
requires 'focusable' elements, for which I usually use the <a>nchor tag.

But first: The point in your code is consistency as you are mix-matching lowercase and uppercase in #content and id="Content". That is why it does not work anyway.

Answering your questions:

1) make upper/lowercase consistent!

2) To create a hover with persistency, trigger the display of 'content' with a focusable 'trigger' element

On hover/click the outer <a> stays focused and therefore its sibling #content visible.
On hover .shorttext its sibling .longtext will show.

On click .shorttext (actually anywhere in #content) the content box will close again as the outer <a> loses focus again.

FYI-1, attribute display is not animatable, so you will need an alternative when you need a transition on some element. In this case opacity going from 0 to 1 is used (optionally combined with width and height, from 0 to 300px).

FYI-2, using href="javascript:void(0)" instead of href="#" will prevent browers from adding an entry in their history log each click.

FYI-3 final, use CSS classes by default, these are generic making it a lot easier to copy the same behaviour in your HTML, without repeating CSS each time. IDs are specific and require you to copy equal CSS over and over.

a {  color: currentColor;  text-decoration: none}
.picture {  position: fixed;  left: 0px;  right: 0px;  top: 0px;  bottom: 0px;  margin: auto;  width: 375px;  height: 375px;}
.content {  /*  display: none;  remove */  opacity: 0; /* add */  transition: all 150ms ease-in-out; /* add */  position: fixed;  left: -800px;  right: 0px;  top: 0px;  bottom: 0px;  margin: auto;  width: 0; /* [OPTIONAL] modify from 300px */  height: 0; /* ditto */  background-color: #7377a8;}
.trigger:hover+.content,.trigger:focus+.content {  /* add, for persistent display of content. click elsewhere to close again */  /*  display: block; remove */  opacity: 1; /* add */  width: 300px; /* [OPTIONAL] add, see above */  height: 300px;}
.shorttext { /* eye-candy only */  width: 100%;  text-align: center}
.longtext {  display: none}
.shorttext:hover+.longtext {  display: block;}
/* little debug helper */
[outlines="1"] * {  outline: 1px dashed purple}

<body outlines="0"><a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a><div class="content">    <h3 class="shorttext">short intro text, hover me</h3>
    <p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et        deleniti copiosae.</p></div></body>

How to show/hide a div while hovering over a specific figure item?

Whilst I imagine you could use purely CSS for the purpose of this, it's much easier to put JS into practice to reach the desired result.

The below snippet highlights the use of an in-line JavaScript solution utilizing onmouseover and onmouseout.

<!DOCTYPE html><html>
<head>    <title></title>    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat">    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    <link rel="stylesheet" type="text/css" href="style.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    <style>        .PinDiv{            display: none;        }    </style></head><body>    <div>        <div>            <section>                <figure>                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv1').style.display='block';" onmouseout="document.getElementById('PinDiv1').style.display='none';">1</i>                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv2').style.display='block';" onmouseout="document.getElementById('PinDiv2').style.display='none';">2</i>                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv3').style.display='block';" onmouseout="document.getElementById('PinDiv3').style.display='none';">3</i>                    <i class="HoverPin" onmouseover="document.getElementById('PinDiv4').style.display='block';" onmouseout="document.getElementById('PinDiv4').style.display='none';">4</i>                </figure>            </section>        </div>                    <div id="PinDiv1" class="PinDiv">            <h3>Text item 1</h3>        </div>        <div id="PinDiv2" class="PinDiv">            <h3>Text item 2</h3>        </div>        <div id="PinDiv3" class="PinDiv">            <h3>Text item 3</h3>        </div>        <div id="PinDiv4" class="PinDiv">            <h3>Text item 4</h3>        </div>    </div></body></html>

CSS display block on hover

You cannot hover over something that is not displayed. You could use opacity or visibility instead. jsFiddle.

.info {
   opacity: 0;
}

.info:hover {
    opacity: 1;
}

Alternatively, if you really want to use display:none, then give #items, .item, or your outer a a set width and height, and place the :hover on that element. jsFiddle. For example:

#items{
    width: 20px;
    height: 20px;
}

.info{
    display: none;
}

#items:hover .info {
     display: block;  
}

If you want the correct width and height, you can use javascript/jQuery to get the width/height of a visible .info, hide .info, and then set the height/width of #items to those values gotten from .info.