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?
Related
So I have the situation that is shown in this screenshot:
There is a calendar that open when a button is clicked, the div container for the calendar is absolutely positioned. But the scrollbar of the underneath table is always on top of that calendar, the calendar has a very high z-index already.
The table has overflow set to auto.
I tried targeting the scrollbar with some custom CSS to manipulate the z-index but that made the whole scrollbar disappear:
::-webkit-scrollbar {
z-index: -1;
}
Also tried ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb which had no effect. Any idea what I can try? Thanks.
P.S. I'm using VueJs with Tailwind.
Increase the z-index of calendar like 999
.your_calendar_class{
z-index: 999;
}
have you tried positioning the parent container of the calendar div?
add your css "position" tag.
.your_calendar_class{
z-index: 999;
}
this doesn't work.
use:
.your_calendar_class{
z-index: 999;
position:relative;
}
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) ?
Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).
http://jsfiddle.net/rk7n7xjj/1/
I tested it in any other browsers and it works fine.
HTML
<div class="gray">This link is not clickable in IE</div>
<div class="yellow">Some placeholder text</div>
CSS
.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.
The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.
Alternate Solution
If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.
.yellow {
position: relative;
z-index: 1;
/* other styles */
}
I am using display: inline-block; to keep some div's next to each other. I do not know why but on hover the div will move up. I think the amount it moves up has to do with the padding of an element in its non hover form(The .title class element). This is very odd and I cannot figure out why this is happening because all values are reset in the hover form. JSFiddle Note I'm using Sass so the css might look a bit weird
.option {
vertical-align:bottom;
}
Because you declare the elements inline, they follow the same vertical alignment rules as all flowing content of a page - sort of centered. Force it to a fixed position of the entire line and it's solved.
Adding the above line to the element I wanted to hover helped me solve this problem:
.example {
border: 10px solid transparent;
}
.example :hover{
border: 10px solid;
}
I've currently working through a tutorial on responsive webdesign, and I wanted to make my navigation different than what the tutorial had (I want my nav bar to have a coloured background, and be centered..as opposed to the tut's not having a bkgd and was left-aligned).
Without the background I had the submenu displaying properly. When working to setup the coloured bar in the background, the only way I could get it to show up was to remove the 'float:left;' that I originally had in my '.primary ul li{}' selector. Now that that is removed, when I mouse over 'Item 4' which is the item with the submenu, the submenu now displays left-aligned with the bar instead of directly below Item 4. You can see what I mean here:
http://jsfiddle.net/mark_a_b/ytB66/1/
If I add the 'float:left;' back in, you'll see that the background colour bar of my navigation disappears, and my menu items are no longer centered as I want them (not I set the bkgd colour for this version to be dark grey just so you can see the menu items) as shown here:
http://jsfiddle.net/mark_a_b/ytB66/3/
I'm sure it's likely something silly that I'm just overlooking, but I've spent too much time messing around with it and getting nowhere, so was hoping someone else might be able to help me out with this. Appreciate any help offered!
Thanks!!
Just add a positioning to your sub-menu left: 0; - DEMO
.primary ul ul{
position: absolute;
left: 0; /* this */
z-index: 999;
background-color: #ccc;
height:0px;
overflow: hidden;
min-width: 100%;
}
<ul> and <li> are block-level elements;
normally <li> are placed vertically, while here they're displayed horizontally because of the display: inline; property value.
Every <li> here is also a container for another <ul> and it's not good to use an inline-level element as container for a block-level element.
The solution is: use display: inline-block;, which combine inline-level display style with block-level behaviour:
.primary ul li{
display: inline-block;
position: relative;
}