Using Only Css, Show Div on Hover Over Another Element

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;
}

Show div when hover another div using only css

This will work, but only if the two divs are adjacent and b follows a.

#a:hover + #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="b">Div B</div>

If you have divs in between use ~

#a:hover ~ #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>

To go the other way around, unfortunately you will need Javascript

// Pure Javascript
document.getElementById('b').onmouseover = function(){
    document.getElementById('a').style.backgroundColor = '#f00';
}
document.getElementById('b').onmouseout = function(){
    document.getElementById('a').style.backgroundColor = '';
}

// jQuery
$('#b').hover(
  function(){$('#a').css('background', '#F00')}, 
  function(){$('#a').css('background', '')}
);

Full fiddle http://jsfiddle.net/p7hLL/5/

Display a DIV on hover, over but within another DIV which is hovered over. With CSS

You can use position property like this:

Html

<div class="book">
  <div class="info">More info here</div>
  <div class="image">
      Image here
  </div>
</div>

CSS

.book {
  position:relative;
}
.info {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:none;
}
.book:hover .info{
  display:block;
}

The demo http://jsfiddle.net/6ReTK/10/

To get some effect you can use Jquery Fading methods or use CSS transitions:

info {
  transition:opacity 1s;
  opacity:0;
}
.book:hover .info{
  opacity:1;
}

Another demo http://jsfiddle.net/6ReTK/12/

How to show another element with hover in Angular?

The main problem of your code are

1. Wrong event name.
2. The element doesn't rendered so you can't targeted the element.

Here is simple solution for you, It might be other way to implement as well.

Try this one, put on your .ts file of the component.

  onImgMouseover($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'block';
  }
  
  onImgMouseout($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'none';
  }

and need modify some on HTML something like

   <div
     class="grid pb1rem"
     (mouseenter)="onImgMouseover($event)"
     (mouseleave)="onImgMouseout($event)"
     >
     <div *ngIf="avatar === null" class="image_wrapper">
       <input
         type="file"
         accept=".png,.jpg"
         (change)="updateImage($event)"
         class="file-input"
         #selectImage
       />
     </div>
     <div *ngIf="avatar !== null" class="image-content">
       <img
         class="image-bg"
         [src]="avatar"
         (click)="selectImage.click()"
         hover-class="test"
       />
     </div>
     
     <div #show class="bg-box-hidden" hover-class="show">
       <button class="btn only-icon">
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
       <div class="box-button-up">
         <input
           type="file"
           accept=".png,.jpg"
           (change)="updateImage($event)"
           class="file-input"
           #selectImage
         />
       </div>
     </div>
     </div>

How to display div element on hover another element using css-in-js?

Please check this example:

import React, {useState} from "react";

export default function ShowButtonHover() {
    const [style, setStyle] = useState({display: 'none'});

    return (
        <div className="App">
            <h2>Hidden message in the box. Move mouse in the box</h2>
            <div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
                 onMouseEnter={e => {
                     setStyle({display: 'block'});
                 }}
                 onMouseLeave={e => {
                     setStyle({display: 'none'})
                 }}
            >
                <div style={style}>This was hidden</div>
            </div>
        </div>
    );
}

Show DIV on hover of other DIV that is not parent with CSS or JS

In this particular instance you can use adjacent sibling combinator + to target the element having .field-2 class as follows:

Example Here

.field-1:hover + .field-2 { display: block; }

Also if the .field-2 don't immediately follow the .field-1, you could try using general sibling combinator ~ instead:

Example Here

.field-1:hover ~ .field-2 { display: block; }

---

Related Topics