I have the following code: But how can I hide the underlined glyphicon?
<p:commandLink ajax="false" action="#{languageGeneralListController.doEditLanguageGeneral(languageGeneral)}">
<span class="glyphicon glyphicon-pencil" title="Editieren"></span>
</p:commandLink>
Here my CSS:
a:link {
color: #1BA1E2;
text-decoration: none;
}
a:visited {
color: #1BA1E2;
text-decoration: none;
}
a:hover {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:active {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
I tried with the last a:hover img but it doesn't work.
Could anybody help me, please.
Try this
a:hover .glyphicon {
text-decoration: none;
}
As aDroidman pointed out your css is targeting an image.
Edit
Have a look at this example and see if it helps: http://jsfiddle.net/xae8n/
For a link with a glyphicon in it you will need to these two things:
Assign a class to the link, then use that class to disable the normal link underline.
Assign a class to the text inside the link that use that to underline the text when the class from (1) is hovered over.
Hopefully that makes sense?
Related
I am creating a stylesheet for print media that includes an inline SVG as the content of an element's pseudo-class (i.e., ::before, ::after).
When testing in Chrome, it seems to work just fine, but when the page is first loaded in Firefox and Safari, the SVG element does not appear in the print preview. It then appears on all subsequent attempts.
I am not exactly sure what is going on, but if I had to guess, my conjecture would be: when page hasn't been cached there is latency rendering the pseudo-element that is happening concurrently to the browser creating the print page.
I am very curious to know why this is happening, and if there is any solution where an SVG pseudo-element can be used reliably.
Here is a stripped down code example. Please see if you can reproduce this issue:
var button = document.querySelector('button');
button.addEventListener('click', function () {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
position: relative;
display: block;
margin-top: 1em;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
}
<div>
<button>
print
</button>
</div>
I can repro.
It seems to be a bug with the loading of the svg, I guess it would be the same with any image.
One workaround is to load it outside of your #print rules with display: none :
var button = document.querySelector('button');
button.addEventListener('click', function() {
window.print();
});
div {
text-align: center;
}
button {
margin: 2em;
padding: 1em 2em;
}
div::after {
display: none;
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
#media print {
button {
display: none;
}
div::before {
content: 'Pseudo-elements';
font-weight: bold;
margin-top: 1em;
}
div::after {
opacity: 1;
position: relative;
display: block;
margin-top: 1em;
}
}
<div>
<button>
print
</button>
</div>
An other one would be to preload it via js before hand.
So I write my css trough sass (scss). I use the ampersand mark (&) to target children. However, when I'm doing a hover state of a certain element I cannot the children anymore. Is there a way to do this?
To be clear: I want to target the children by their class, not by their element (eg: span).
HTML:
<div class="container">
<div class="container__inner">
<p class="container__inner__paragraph">
foo to the
<span class="container__inner__paragraph__highlight">
bar
</span>
</p>
</div>
</div>
SCSS
.container{
&__inner{
&__paragraph{
color: yellow;
background: black;
&:hover{
background: rgba(0,0,0, .3);
// This obviously works
span{
color: green;
}
// This obviously works too
.container__inner__paragraph__higlight{
color: green;
}
// This however doesn't work
&__highlight{
color: green;
}
}
&__highlight{
text-transform: uppercase;
font-weight: 700;
}
}
}
}
A codepen that hopefully explains my struggle:
http://codepen.io/anon/pen/GZqGPq
You can try this way:
.container__inner__paragraph {
&:hover &__highlight {
background: red!important;
}
}
But I'm not 100% sure what you want?
Thanks to #simey.me I found the proper solution. If you add an ampersand (&-mark) behind the &:hover you can target children classes in the ampersand way.
Codepen for the lovers! http://codepen.io/anon/pen/GZqGPq
The scss:
.container{
&__inner{
&__paragraph{
color: yellow;
background: black;
display: inline-block;
padding: 4rem;
&:hover &{
&__highlight{
color: green;
}
}
&__highlight{
text-transform: uppercase;
font-weight: 700;
}
}
}
}
You can use the class name as you are doing right now, your code is correct, you only have a typo error, in your scss you have .container__inner__paragraph__higlight but the correct class name is .container__inner__paragraph__highlight
http://codepen.io/anon/pen/yOJEdE
Try this if you need to style the highlight class when you hover on the paragraph tag:
.highlight & {color: blue;}
I'm working on my first website (I'm a n00b) and on Safari and Chrome it looks exactly the way I want. However, in IE 8 the nav bar does not work at all. In Firefox, once you hover over one of the links it brings the drop down box down but it adds an extra pixel in between the main nav bar and the sub links.
My website's URL is: http://tonerleague.x10.mx/basketball.html
My HTML is...:
<div class="menu">
<nav>
<ul>
<li>Main
<ul>
<li>Advertise</li>
</ul>
</li>
<li>Test
<ul>
<li>Test</li>
<li>TestTest</li>
<li>TestTestTest</li>
</ul>
</li>
<li>Unknown
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Support</li>
<li>Forums</li>
</ul>
</nav>
</div>
My CSS is..:
.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
nav ul {
padding: 0;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover {
/*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li a {
display: block; padding: 5px 35px;
color: #FFF; text-decoration: none;
border-right: 0px solid #FFF;
-moz-border-radius: 0;
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li {
float: none;
border-top: 0px solid #FFF;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
position: relative;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li a {
padding: 5px 15px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #000000;
}
SELECT boxes are not typical HTML elements. They're closely tied to the OS and can be difficult to style, especially on IE8.
You may opt to wrap the SELECT in a DIV and set the overflow to contain the element, or use an IE8-speficic CSS declaration to tweak the size.
See: How does one target IE7 and IE8 with valid CSS?
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
Example:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">ยป Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.
i have a big problem with a menue ONLY in IE8 - all other browsers work perfect:
There's an menue like this one:
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
and the CSS is this one:
ul li { padding-left: 23px; line-height: 29px; }
ul li:hover,
ul li.active { background: url(../images/bg_arrow_blue.png) no-repeat top left; }
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; }
ul li a:hover,
ul li a.active { border-bottom: 1px solid red; }
So now - in IE 8 i have the problem, that on mouseover the links jumps up and down on mouseout, because of the border-bottom i think. All other browsers do it right with border bottom and no jump.
I have googled a lot and not found a solution.
Hope anyone here can help!
Thank you so much.
Sascha
Okay,
for anyone who's interested - i have the solution:
ul li a { font-size: 18px; color: #FFFFFF; text-decoration: none; margin-bottom: 5px; letter-spacing: -0.03em; padding-bottom: 1px; }
i just had to add a "padding-bottom: 1px;" to the "ul li a" statement.
Have a nice christmas.