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.
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
I am trying to make my table rows highlight when i hover my mouse over them
.Table .Popup tr:hover {
background-color:red;
}
Seems to work find on TD tags, but I seem to have trouble getting it to work for TR tags :
Fiddle :
http://jsfiddle.net/kUTDB/2/
Any idea what I am doing wrong?
The proper CSS should be this:
.Popup tr:hover td {
background-color:red;
}
.Popup .PopupRow:hover td {
background-color:red;
}
You can't (reliably) style a <tr>, so you need to apply the style to children <td>s on hover (hence tr:hover td.
Additionally, the .Table class doesn't refer to any elements in your fiddle, which may also be causing problems.
http://jsfiddle.net/kUTDB/12/
You can just do:
td:hover {
background-color:red;
}
try like this
.PopupContainer .Popup tr:hover {
background-color:red;
}
Fiddle
Your CSS selector was incorrect:
Both
table tr:hover {
background-color:red;
}
and
table .PopupRow:hover {
background-color:red;
}
will work here.
Fiddle: http://jsfiddle.net/kUTDB/7/
if you needed to be very specific, you could use this selector:
div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{
However, since longer selectors cost time, the more broad selectors are better. Really, you only need .PopupRow:hover here.
You need to do the td
tr:hover td {
background-color:red;
}
As stated on your previous question:
Your CSS selectors are not selecting anything.
.Table .Popup tr:hover {
background-color:red;
}
should be:
.Popup tr:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/4/)
and
.Table .Popup .PopupRow:hover {
background-color:red;
}
should be
table tr.PopupRow:hover {
background-color:red;
}
or
table .PopupRow:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/5/)
Mind you, these will both select the same elements so the selector with more specificity (the second one) will be the one that is actually used.
Your first selector, .Table .Popup tr:hover will match tr elements that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
Your second selector, .Table .Popup .PopupRow:hover will match any elements with a class of PopupRow that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
The markup in your fiddle does not reflect that structure and so nothing is matched by the selectors (which is why your style is not reflected).
.Popup tr:hover {
background-color:red;
}
This will totally work.
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.
I have this html code
<div id="mybox"> aaaaaaa </div>
and this is my css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hover but I don't know the code.
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.
Here is the simplest way to do it with CSS3:
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
http://caniuse.com/#feat=css3-colors
Cheers! :)
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
If you only want to hide the element but retain the space occupied by it, you should use:
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
.hide { display: none; }
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
You could make the text color the same as the background color:
#mybox:hover
{
background-color: red;
color: red;
}
What about opacity
#mybox:hover {
opacity: 0;
}
Best way to hide in html/css using display:none;
Example
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
This is a late answer but still, guess setting the color to transparent is the best option.
#mybox:hover{
background-color:red;
}
There are many ways to do it:
One way:
#mybox:hover {
display:none;
}
Another way:
#mybox:hover {
visibility: hidden;
}
Or you could just do:
#mybox:hover {
background:transparent;
color:transparent;
}
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.
I would say:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
<div id="mybox">
This text will disappear on hover
</div>
This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
Sorry to be 7 years late but this could be achieved by using the below:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.
Using the above code can be useful if you need to reference code in a div but don't need it to display.
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>