I am pulling my hair out currently, because Cufon is either playing up, or I'm thinking too complicated. I have a span link class, which includes text inside it. The colour of the font inside the a span should change on hover state.
Cufon.replace('.info-grid a span', { fontFamily: 'Vegur', hover: true, color: 'white', hoverables: { a: true, span: true } });
With the above code, when you open the site, the font is white. I assume it's because the above code doesn't actually set the hover state, but how can I set it? I tried setting .info-grid a:hover span class but it didn't work.
CSS...
.info-grid a span {
position: relative;
left: 10px;
top: 80px;
font-size: 0.94em;
line-height: 1.3em;
font-weight: bold;
text-transform: uppercase;
color: #009FD4;
background-color: #ffffff;
}
.info-grid a:hover span {
color: #fff;
background-color: #009FD4;
}
HTML
<div class="info-panel" id="info-firstteam">
<h3>First Team</h3>
<div class="info-grid">
<div>
<a href="../players/profiles/1.html" class="pic-no1">
<p id="nametext"><span id="firstline">James</span><br><span id="secondline">Tillotson</span></p>
</a>
</div>
<div>
...additional divs for players
</div>
</div>
You probably wanted to setup color as part of :hover styling, right? In that case you should put this rule inside hover property, like this:
Cufon.replace('.info-grid a span', {
fontFamily: 'Vegur',
hover: {
color: 'white'
},
hoverables: { a: true, span: true }
});
It's said in the documentation, however...
Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results.
... and the way I see it, this notice should be accounted in your case. So maybe it's best to depend on :hover state of a only for changing the colors, replacing the code with this:
Cufon.replace('.info-grid a', {
fontFamily: 'Vegur',
hover: {
color: 'white'
}
});
... as <a> elements are 'hoverable' by default.
Related
I need to make a button that changes from the text 'Done' to the text 'Update' on hover, ONLY when a true/false flag is true. I had a working method using onMouseOver to detect mouseover and then flip the value using state. However i've been asked to do it via CSS.
I'm having a hard time getting it done with just CSS.
<Button>
<span className={onHoverHide}>Done</span>
<span className={onHoverShow}>Update</span>
</Button>
CSS in JS
onHoverHide: {
display:'auto',
'&:hover':{
display: 'none'
},
},
onHoverShow: {
display:'none',
'&:hover':1
display: 'auto'
},
},
this will make the first span vanish when the TEXT is hovered, but won't make the 2ndary text appear. As well I need it to apply on mouseover to the button, not just the text.
How can I target the span in the button correctly?
onHoverbutton: {
'&:hover': {
'& span': {
display: 'none'
was not successful when applied to the button.
Use & $className to target nested className in CSS-in-JS
onHoverbutton: {
'&:hover': {
'& $onHoverHide': {
...
}
}
}
You're setting display: none; to span, but both of your texts are a span. Target the specific class of the one you want to hide. Here's CSS code which can do this:
.onHoverShow {
display: none;
}
button:hover .onHoverShow {
display: block;
}
button:hover .onHoverHide {
display: none;
}
I am using below CSS to apply Active and Inactive CSS to two buttons.
On page load one button will be "active" and the other button "InActive".
.buttonactive button {
color: white;
font: bold;
/*background: chocolate;*/
background-color:#39373e;
border-radius: 5px;
}
.buttonInactive button{
color: white;font: bold;
background-color:#adaaaf;
border-radius: 5px;
}
using the below code on page load
//set CSS
webix.html.addCss($$("btnApps").getNode(), "buttonactive");
webix.html.addCss($$("btnTitles").getNode(), "buttonInactive");
Up to here CSS are applying correctly.
When I click on the second button the active CSS class should apply and the other button should apply the inactive CSS class. However, it is not working for me?
{view: "button", id:"btnApps", value: "Apps", width: 205, height: 35, click: "getApps();" },
{ view: "button", id:"btnTitles", value: "Titles", width: 205, height: 35, click: "getTitles();" },
function getApps() {
webix.html.addCss($$("btnTitles").getNode(), "buttonInactive");
webix.html.addCss($$("btnApps").getNode(), "buttonactive");
}
function getTitles() {
webix.html.addCss($$("btnTitles").getNode(), "buttonactive");
webix.html.addCss($$("btnApps").getNode(), "buttonInactive");
}
Here is the snippet code
https://snippet.webix.com/k9oj9wpu
The syntax for the click handler is wrong. you should use this syntax:
click: getApps
As specified in the doc here: webix button click
Your snippet code corrected with the right syntax is here:
https://snippet.webix.com/dx5d9e49
I'm working on a button test that needs to be completed in jQuery only. The site is fairly confusing, but I think I have simplified the issue below. I am trying to apply some styles to these buttons however the class is used all over and some specific instances need to be excluded.
<body>
<div>
<a class="button primary" href="...">change me</a>
</div>
<div class="ancestorClass">
<h2>
<a class="button primary" href="...">don't touch</a>
</h2>
</div>
</body>
Currently I have the following...
jQuery("<style type='text/css'>
.change-button:before
{font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #01a982;
}
.change-button-gray:before
{
font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #707070;
}
</style>").appendTo("head");
jQuery(".button.primary").addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
});
In previous variations of tests on this site I was able to use the
following to prevent specific buttons from being affected, but because
of how the css is being added in on this variation it no longer works
for me.
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
Here is the code I was using that got the error:
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass(".ancestorClass");
.addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
})});
there's many ways to solve your problem but I will choose your idea instead of coming with a new one. Instead of using this code :
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
I suggest you to use this :
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass("ancestorClass");
});
Here's a fiddle showing how it works.
An other solution would be to use the css selector :nth-child(number) but it's less beautiful and you have to change the selector when you add or delete elements that precede the target (with the same class).
My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.
Here is the code for the button:
<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>
And here is the function that inserts an image to the map:
$('#tram7')[0].onclick = function() {
if (overlayTram7.getMap() == map) {
$('#tram7').addClass('deselected');
overlayTram7.setMap(null);
} else {
$('#tram7').removeClass('deselected');
overlayTram7.setMap(map);
}
};
The style change worked with a hover, but I don't know how to change the style of a clicked button.
.Button {
font-family: Calibri, sans-serif;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: white
}
.Button:hover {
color: white;
background:green
}
Thanks in advance.
Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:
You'll want the psuedo-selector, :active
.Button:active {
color: white;
background:green
}
Here is an example
Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()
Updated example using toggleClass()
The :active pseudo-selector should be what you're looking for
.Button:active {
color: white;
background:red;
}
Use toggleClass in your click callback to add/remove a class which will style your button:
$('#tram7').toggleClass('clicked');
And the class:
.Button.clicked {
color: white;
background:blue
}
http://jsfiddle.net/5m9h6/1/
in css I define the behavior of the text links like this:
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:hover {
color: #9999ff;
}
a:visited {
color: gray;
}
Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???
Thx
#Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:visited {
color: gray;
}
a:hover {
color: #9999ff;
}
This is a CSS Specificity issue.
Rules of the same specificity will apply according to the order they were defined.
You should move the more important rules to the bottom of the list, so they take precedence.
Any pseudo-class you don't need, simply do not define it
NB: 1. follow this ordering of a to ensure styling apply to links
2. It's not necessary to specify {visited, focus, active} if you aren't using it.
a,
a:link {
color: fontColor(color2);
text-decoration-color: fontColor(color4) !important;
text-underline-position: under; // to increase the gap between text and underlining in CSS
text-decoration-thickness: 2px;
font-weight: 600;
}
a:hover {
text-decoration-color: fontColor(color2) !important;
}
// mind you am using SCSS (fontColor(color2))
###Try this I think it will work###
hover MUST come after link and visited in the CSS definition in order to be effective active MUST come after hover in the CSS definition in order to be effective.
Copied from w3school