I want to display scrollbar while the mouse hover the container, if the contents inside the container overflows the container.
The below code works good in chrome but doesn't work in firefox, because it doesn't suppport overlay property.
<style type="text/css">
.container {
overflow:hidden;
}
.container:hover {
overflow:overlay;
}
</style>
<div class="container">
contents
</div>
I tried using overflow:auto on hover but it changes the alignment of text inside the container while mouse hovers.
Is there any way to achive my need in all browsers?
Add scrollbar-gutter:stable to .container and this should do the trick. More info here and here.
Related
I'm trying to build a pure-css mouse-over menu, where a DIV appears to the right of an item that is hovered. The basic idea is to use an absolute positioned DIV that appears on :hover
It will look like this (colors for debugging purposes)
Result
Relevant CSS
.hoverDiv:hover .hoverItem
{
background-color: green;
}
.hoverDiv:hover .hoverMenu
{
display:inline-block;
}
.hoverMenu
{
display:none;
position: absolute;
background-color: green;
left:100%;
top:0px;
}
This works great. However, if there are too many items I would like to have a (vertical) scrollbar. But when I add overflow-y:scroll, the hover effect also triggers a horizontal scrollbar.
See https://jsfiddle.net/g2g1zutb/12/ , the red section is 'wrong', the yellow section is OK, but has no scroll.
What would be the best way to solve this? Is it even possible in CSS only?
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
JFIDDLE DEMO
As you can see on the jsfiddle link, I have a button with tooltip display on mouse hover. The problem is that tooltip area isn't overlaying the parent div and will display only inside the div.
I know that if I remove .panel-heading {
overflow:hidden;
} this will work but I need this css to stay for some of the responsive issues. I have tried adding .toolt {
overflow:visible;
} to tooltip div but it won't work.
You can change container of tooltip
$('.toolt span').tooltip({container:'body'});
Hoping for some advice around a CSS issue - I have a layout where I'm absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)
<div>
<img />
<a />
</div>
The containing div has a background colour, and the image has its opacity reduced - on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I'm using a few CSS transitions as well, just to prettify it.
I know that positioning the link absolutely removes it from the flow, so setting height to 100% won't work, but shouldn't I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.
Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).
Any suggestions?
You need to have the <a> tag wrapping the image and the text:
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
<span>Link text</span>
</a>
Here is the CSS:
a {
width:200px;
height:200px;
background:#cccccc;
}
a:hover > span {
display: inline;
}
span {
display: none;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
color:red;
}
Fiddle: http://jsfiddle.net/thSCJ/12/
Instead of changing the opacity, simple change the font-size property and put the entire thing in the <a> tag.
See this JSFiddle.
Im trying to achieve a heading effect link on bbc: http://www.bbc.co.uk/
scroll down to most popular/whats on/explore
I'm after an effect where the heading is with text on the left and the arrow on the right.
and on hover both change color.
how can it be done so the heading fills the container and has the behaviour described?
thanks
You can use floats to make the arrow stick to the right side by floating it to the right
.arrow { float:right; }
For the color change you will need to change the contained elements when the mouse is hovered on the container
.container:hover .title, .container:hover .arrow { color:green; }
You can check my example here.
Update
Working with hyperlinks does not make it any different. All you have to do is wrap the two containers inside a hyperlink and then apply changes to the hyperlink like
http://jsfiddle.net/pZtGw/3/
The new html markup would look similar to this
<div class="container">
<a href="your_link_here">
<div class="title"> This is a title </div>
<div class="arrow"> > </div>
</a>
</div>
And instead of applying the color change to the two contained elements, we change the hyperlinks color property through our CSS flie
.container:hover a { color:green; }
http://jsfiddle.net/2yYyL/1/ here is an example on jsfiddle
what you want to do is add a sudo class of :hover on the wrapper and change the color of the text then have a have a sudo class of :hover on the parent element of a span like so
div:hover span{ background-image:url();}
so when you hover over the parent element it changes the background image of the child element