Trying to understand what is going on, maybe someone can explain.
Upon :HOVER I want the entire table content to go transparent. This works for text inside td wrappers. However, text inside a span wrapper doesn't know it should go transparent.
If I remove color:#897 from the span CSS suddenly it does what I want and all text goes transparent. I did try all sorts of CSS tricks to no avail, the table refuses to recognize span as a descendant of table. What is wrong and how to fix it, if possible.
The reason is that you define color in SPAN as table#Factors span & you define your hover table#Factors:hover So color of SPAN still override you table#Factors:hover class color. Write like this:
table#Factors:hover span{
color:transparent;
}
Check this http://jsfiddle.net/AyNg3/
Read this for more http://diythemes.com/thesis/css-specificity-thesis/
jsFiddle
table:hover,
table:hover span{
color: transparent;
background: transparent;
}
You just needed to include a selector for the span as well.
Related
I am using tooltips in bootstrap3.
If you hover over the gap between the lines in the 'Position' column in the table example, the tool tip will disappear. Notice that the mouse pointer changes from arrow to 'text'.
How do I get it so that the tooltip is always displayed when hovering over the cell.
Note that I tried to move the tooltip to the parent td, but this is no good because when hovering it brings in a div which breaks the table formatting.
I believe it should be possible to solve this using CSS.
JSFiddle
Thanks for the answers which got me to the solution.
Either using div (not span) solves the issue, or declaring the following css:
[data-toggle="tooltip"]{
display: block;
}
this happen because the td have a padding of 8 px- to fix it try that:
[data-toggle="tooltip"]{
display: block;
cursor: pointer;
padding:8px;
}
.table>tbody>tr>td{
padding:0;
}
i've got problem. I cant force the code to hover h3and div "underline" at the same time.
Thereis my code: https://jsfiddle.net/nac3570n/
As you can see hover's working but doesnt affect to underline at the same time, unless u'll move cursor on underline
Try changing this:
.underline:hover {
background-color: red;
}
to this:
a:hover .underline {
background-color: red;
}
Basically we move both :hover events to trigger on the same action. In this case, hovering over the parent <a> tag.
https://jsfiddle.net/qmg6wbv5/1/
...fiddle doesn't use your exact styles, but you'll have an easier time using a pseudo element (:after) on the h3, I think. That way it naturally responds to hovering the h3. Hope that gets you on the right track.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I want to add the href of a link after the link using a pseudo-element but not keep the parent's text-decoration. The code below shows "a" and "a:after" having different text-decoration.
a
{
text-decoration: none;
color:#000000;
}
a:after
{
content: attr(href);
color:#999999;
text-decoration: underline;
padding-left: 10px;
}
Even though the text-decoration is set differently both "a great link" and "www.stackoverflow.com" have the same text-decoration. (See below)
a great link wwww.stackoverflow.com
Changing the text-decoration of the pseudo-element doesn't work as it's specificity is 1. The only way I can solve the problem is by adding a span to the link itself.
.underline-kludge
{
text-decoration:underline;
}
<span class="underline-kludge">a great link</span> wwww.stackoverflow.com
I'm not happy with this solution. Is there a better way? Do I have to add spans to links to solve this problem?
EDIT - EDIT - EDIT
I would like like the pseudo class (a:after) to have a different text-decoration than the parent. I can't do an over-ride of the parent text-decoration using css alone. The only way I see how to do it is by adding a span which I would rather not do.
This is actually a really good question - it stumped me for a while.
Simply set display:inline-block on the :after pseudo element, therefore allowing text-decoration:none to take effect; and thus not be overwritten.
Working jsFiddle here
See a example without display:inline-block - you will notice the problem.
I have a heading which is likely to span over two lines, i'd like the heading to have a background color but for it to only span the width of the text on the line, like this:
http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png
So far all the solutions I have found only appear to work against a background with a solid colour, anyone have any ideas how I can achieve this?
What your are requesting for is an old question that come up again and again once in a while , text or inline element cannot achieve it, element formated as a box will turn out to be square or rectangle.
The only way to do it , is to set side by side inline-block elements wrapping words or groups of words.
Script server or javascript can help you, so you should not have to mind text markup while typing.
The idea looks like this : http://jsfiddle.net/rnCTL/
h1 span {
background: #fff;
line-height:44px;
padding:4px 4px 4px 10px;
margin:0;
display:inline-block;
}
.headline-black {
height:219px;
width:367px;
background:url(http://f.cl.ly/items/0r3N2l3A1K3c3h2F3E3l/Screen%20Shot%202013-06-30%20at%2000.18.16.png);
padding:40px;
box-sizing:border-box;
}
Try this.
Basically if you have a containing background element you can any element on top of it with another background.
Check out the Fiddle
h1{
width:200px;
background:white;
display:inline-block;
margin-left:60px;
}
I've done this in situations where you put a <span> within the Header tag and applying the background color to that. Bear in mind, you won't have any padding where the line breaks: check out this fiddle - http://jsfiddle.net/R5ZsG/
If you can put a   that would work to pad where it breaks but you might not have full control over it.