I found this solution here earlier.
.hiding {
display: none;
}
.trigger:hover + .hiding {
display:table-row;
}
It hides a table row then displays it when hovering over another table row (class trigger).
Question: I would like to have class hiding to show when it hovers over itself also. Currently it goes back to display:none when you are no longer hovering over class trigger.
You are using + which is an adjacent element selector, what I would suggest you is wrap the element .hiding inside another element say class .test and than alter your selectors like
.test .hiding {
display: none;
}
.test:hover .hiding {
display: table-row;
}
.trigger:hover + .test .hiding {
display:table-row;
}
So what we are doing here is we are hiding the element nested inside the .test which in this case is .hiding and than we use the second selector with :hover to reveal the .hiding when element with .test is hovered(As it is present, but empty as .hiding is display: none;) and last but not the least we add .test after + in 3rd declaration, just to be sure it doesn't break the rules as .hiding is no more adjacent to .trigger, we have .test as an adjacent element to .trigger
The only option I can think of is to wrap each group of .trigger and .hiding elements within a tbody, and base the show/hide behaviour on the the :hover of that tbody:
HTML:
<table>
<tbody>
<tr class="trigger">
<td>text</td>
</tr>
<tr class="hiding">
<td>hidden text</td>
</tr>
</tbody>
<!-- and so on... -->
</table>
CSS:
tbody .hiding {
display: none;
}
tbody:hover .hiding {
display: table-row;
}
JS Fiddle demo.
You cant do this with css only. You need jquery or javascript
try this
$(document).ready(function(){
$(".trigger").hover(function () {
$(this).css({"display" : "table-row"});
//or u can add class like this
//$(this).addClass("");
},function () {
//if you want return back, you can do here
});
});
If you do not return hover function, It will keep that hovering state.
Related
i have 2 div elements in html :
<body>
<div id="one"></div>
<div></div>
</body>
I want to hide div elements after div with id="one" from CSS, I tried this :
#one:after{display:none}
This doesn't work any other way to do?
No, :after pseudo doesn't do that, you need to use
#one + div {
display: none;
}
Demo
And if you want to hide ALL div followed by #one you will have to use
#one ~ div {
display: none;
}
Demo 2
:after applies to generated content. You want the adjacent sibling combinator:
#one + * {
}
If you know the exact position of the child element (like in you case its 2nd child), you can use nth-child pseudo class
div:nth-child(2)
{
display:none;
}
Fiddle:http://jsfiddle.net/ankur1990/HDq2T/
I want to see 2nd div when mouse Over.
HTML
<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>
CSS
.abc {
display: none;
}
a:hover + .abc{
display: block;
}
The adjacent sibling combinator is not exactly what you want. It can only select the div with the class .ab, because it's directly following the anchor.
What you want is this:
a:hover ~ .abc {
/*...*/
}
This selects every .abc which is following a hovered anchor element, but it don't has to be directly before it.
Had some delay reaching SO so this is late. Here a fiddle for my answer: http://jsfiddle.net/digitalextremist/F5k4L/
The main issue here uses #kleinfreud's suggestion about an adjacent div but weaves in another approach to showing and hiding a div:
.abc {
opacity: 0;
}
a:hover ~ .abc{
opacity: 100;
}
This makes sure the space that div will take up is reserved to begin with, then showing it when needed.
I'm learning HTML5, CSS3. I made a self exercise: instead of using div ul drop menu, trying with table
Why hover it's not working?
http://jsfiddle.net/goldman7911/KQP8Y/
tr:hover {
display : table-row;
}
Regards,
tr {
display: none;
}
tr: hover {
display: table-row;
}
This doesn't make sense since you can't hover over an element that is not being displayed. Instead, you can do table:hover tr as the selector, but this may require a different layout to meet your needs.
I have the following CSS:
td: hover {
background-color:red;
}
td {
cursor: pointer;
background-color: rgb(150,150,150);
}
and my HTML is just:
<table>
<tr><td> </td></tr>
</table>
I can't get the hover to work. Why is that?
:hover is a pseudo-selector, and everything beginning with : is such (e.g. :active, :before etc.).
This can be confused with specifying values:
something: value;
So you need to think about pseudo-selectors as separate objects, not a value.
That's why you need to fix your td: hover so it looks like td:hover.
Note that if you put a space after td like so:
td :hover { ...
This is equal to:
td: *:hover { ...
and therefore will select all items descending from td and apply a style on hover to them (see this example).
Remember, spaces have a meaning in CSS.
You need to remove the space before :hover:
td:hover {
background-color: red;
}
You just need to remove the space between td :hover as the <td> has no descendants ..
td:hover will work
http://jsfiddle.net/xwYTa/
So I am trying to make a dropdown menu where when hovering a link. A table is shown underneath the link. I don't understand why it wont work. Check out the fiddle link.
FIXED LINK
http://jsfiddle.net/ThobiasN/Pt3db/
Html code example:
<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
Css code example:
td.dropdown
{
display:none;
}
a.nav:hover > table
{
display:block;
}
Because the table isn't a child of the link.
The sign > in CSS is equivalent to "direct child of"
Try to put the table inside of the link.
<table> is a sibling to link element. Use + for operating over the sibling.
a.nav + table {
display: none;
}
a.nav:hover + table {
display: block;
}
I think at the end you would need to use some Javascript code to achieve that, but what you are doing wrong is this:
> simbol is for direct child
You want to set display: none for the table element, not the td
Solution:
change the > symbold for this one: + to get the next element
change a little bit your css
HTML
<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
CSS
table{
display:none;
}
a.nav:hover + table{
display:block;
}
JSFiddle
http://jsfiddle.net/Pt3db/5/
Plus advices
Use an unordered list instead table (table for tabular data)
You wouldn't be able to click on the subnav elements, so that's why I think you would need some Javascript
Out there are a lot of good navigation plugins that you can use, don't reinvent the wheel at least you are learning ;)
a.nav:hover > table means that table should be inside a.nav. First of all don't use table here, use ul better and put it inside a.nav
<a class='nav' href='#'>Hover me
<ul>
<li>Show me</li>
</ul>
</a>
This is the proper way to do it, CSS:
a.nav + table tr td.dropdown
{
display:none;
}
a.nav:hover + table tr td.dropdown
{
display:block;
}
You need to hide and show the same element, if you hide a table, don't show a TD, and vice versa
Alternatively, show and hide table instead of TD, CSS:
a.nav + table
{
display:none;
}
a.nav:hover + table
{
display:block;
}
One more thing to keep in mind, + refers to sibling elements, > refers to direct child
Working with css Fiddle
It seems to work either way but here is the way that I prefer
even though it's not css:
$('.nav').hover(function () {
$('table').css('display', 'block');
});
table{
display:none;
}
HTML Code
<a class='nav' href='#'>Hover me </a>
<table class='dropdown'>
<tr>
<td ><p>Show me</p></td>
</tr>
</table>
CSS Code
table.dropdown
{
display:none;
}
a.nav:hover + table
{
display:block;
color: green;
}