I want to display a div(with className='invoice-info') on hover of the icon(which is in table cell) like this:
<div
style={{ position: "relative" }}
onMouseEnter={() => setHoveredInvoiceId(result.gsCustomersID)}
onMouseLeave={() => setHoveredInvoiceId()} >
<i className="icon-container invoice-icon" id={"csInvoiceIcon" +
result.gsCustomersID}></i>
<div className="invoice-info">Hello</div> //this is displayed conditionally
</div>
I wrote some styles for the div like this:
.invoice-info {
position: absolute;
background-color: red;
width: 10vw;
height: 10vh;
z-index: 10;
left: 1em;
bottom: -6em;
}
But due to the width of table-cell is small enough to fit only icon, the div is hidden. I gave z-index to make it float but it is not working. I want a floating div on hover. Could someone help me?
Invoice cell has overflow:hidden property. It worked after changing it to overflow:visible
You can use CSS instead of JS that will have some performance gain.
you can use something like this:
.invoice-info{
display: none;
// your other styling
}
.icon-class:hover ~ .invoice-info{
display: block;
}
~ is general sibling selector in CSS
Related
Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?
Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not
You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }
I am making a simple reactjs app where I need to put a button over image.
My html looks like:
<div className={"panel-body"}>
<img className={"img-responsive center-block"}
src={album.photos.data[0].source} />
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
Its all fine except button is shown below the image.
But I want to show the button over the image or in the middle of the div
How can I make this work ?
make button position relative and use z-index: maybe it will be helpful for you.
If you want to center the button in a div, while there is a background image to the div. I would suggest, to assign a background image for the div, rather than inserting an image into the div. Check out the fiddle:
http://jsfiddle.net/49s505sa/1/
HTML:
<div id="wrapper">
<button type="button">Your Button</button>
</div>
CSS:
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}
button {
height: 20px;
position: relative;
margin: -20px -50px;
width: 100px;
top: 50%;
left: 50%;
}
So, inside the render method
var style = {
backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
In this way, we will dynamically assign images to particular divs. And wont have to worry too much about styling.
Hope that helps!
Use z-index properties
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).. Note: z-index only works on
positioned elements
(position:absolute, position:relative, or position:fixed).
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}
I need a rollover popup based on mouse click location (I cannot exactly use a CSS absolute positionined div inside a relative one for this, since that kind of crops my popup...reason being I have overflow:hidden for layout purpose)
So I cannot use this;
<div class="wrapper">
<ul class="popup"><li> item 1</li><li> item 2</li></ul>
<img src="someImg.gif" width="100" height="100"/>
</div>
.wrapper {
position: relative;
}
.popup {
display: none;
position: absolute;
bottom: 105px;
left: 10px;
}
.wrapper:hover .popup {
display: block;
}
So can I get something based on mouse cursor location and it should be completely fluid (no fixed "px" value and should adjust as the browser is resized)
Thank you.
well u are on the right way to prevent the cropping of pop up give the class css z-index of a 1000+ value n d class wrapper a z-index of less or -1 value
I have a parent/child divs coded as;
<div class="classes scrollable">
<div class="items">
....Some content
</div>
</div>
My CSS is;
.scrollable {
overflow: hidden;
position: relative;
width: 100%;
}
.scrollable .items {
clear: both;
position: absolute;
width: 20000em;
}
Actually my "items" div has it's "left" position changed dynamically via JS (for kind of carousel effect...scrolls to left/right)
Also bcoz it is an absolute div, I cannot get the parent div "scrollable" to expand as per "items" content.
How do I fix this issue ?
You can set height on the .scrollable. The inner scrolling div is just one row, right?
What keeps you from not making .items absolutely positioned?
Can't you just use something like margin-left: -100px, instead of left: -100px;?
Working example of what I mean: http://jsfiddle.net/fk5Q2/