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;
}
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
- Wrong event name.
- 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
Change Bootstrap Navbar Collapse Breakpoint Without Using Less
How to Float 3 Divs Side by Side Using Css
How to Conditionally Apply CSS Styles in Angularjs
Why Does Order of Transforms Matter? Rotate/Scale Doesn't Give the Same Result as Scale/Rotate
How and Where to Use ::Ng-Deep
React - Component Full Screen (With Height 100%)
What Is Webkit and How Is It Related to Css
Adjust List Style Image Position
How to Transition Height: 0; to Height: Auto; Using Css
Customizing Bootstrap CSS Template
Order Columns Through Bootstrap4
How to Change the Cursor into a Hand When a User Hovers Over a List Item
What, Exactly, Is Needed For "Margin: 0 Auto;" to Work
Which CSS Properties Create a Stacking Context
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Force Webkit to Redraw/Repaint to Propagate Style Changes