I'm trying to create faked transparent form fields that "show through" to the background which is a tiled image (which of course are "showing" through the numerous divs between the inputs and the page background). Here's where I'm at:
div#searchbox, div#mailing_list ul li.fields,div#product div.info input.text {
border:1px solid #707070;
background:url(../_images/fade_bg.jpg) 0 0 repeat;
}
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
Now, this works as expected except the background position property isn't doing anything. I can remove them, change them, nothing happens. I'm guessing that it has something to do with the fact it's a repeating background. The position values are the element offsets from the body where the background itself starts. Any way to line these up?
inputs are very hard to style using css.
However, what you could try (works in Firefox) is to remove the background image from the inputs and give them a background:transparent so that the background of the parent shows through.
Try using CSS nesting for this code
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
with their respective parent elements because sometimes what happens is some properties are overwritten. in that case you can use css nesting and make it work
Related
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}
In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
I can set the text of a span with this css.
.tracking-true .tracking-button-text:before
{
content:"Tracking";
}
But I would like to change the text on hover
Something like this but I can't get it to work.
.tracking-true .tracking-button-text:hover
{
content:"Untrack";
}
Can this be done in css?
Update:
Much like Stackoverflow uses :hover to change the cursor to a pointer or change a background color as a ui hint I am trying to convey to the user the same thing. This element can be clicked on and something will happen.
I don't feel this is an innaporopriate use of CSS.
Do this:
.tracking-true .tracking-button-text:before
{
content:"Tracking";
}
.tracking-true .tracking-button-text:hover:before
{
content:"Untrack";
}
I've made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/
However I'm having a hard time getting my button's hover-state to work properly.
This is my markup:
<a class="action-button" href="#"><span>Some text</span></a>
I don't know how to style the hover-effect so that the entire button is "lit" when the user hovers over a part of the button that isn't covered by the <span>.
This is what I get when I hover over a part of the button that isn't covered by the <span>:
Check out my example here: http://jsfiddle.net/timkl/TsDud/
jsFiddle DEMO HERE
Change the last lines to:
a.action-button:hover > span
Ex:
a.action-button:hover > span{
background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
color: white;
}
And as I said in the comment above try to avoid to use separate images for your button states.
Use only one image and for ex. on hover just 'change' the background-position to the part of image representing the state you want!
It will save you the "button disappearance" until the new image is loaded.
You could change the hover rule to only be for a.action-button At present you have the style rule for both a.action-button and its span.
a.action-button:hover { ...
and
a.action-button span:hover { ....
Instead try applying it this way:
a.action-button:hover { ...
and
a.action-button:hover span { ...
won't work on some older version of IE however.
http://jsfiddle.net/HZpDL/
i have a HyperLink on my site that is displaying an image instead of text. what i would like is for it to swap to another image on mouse-over using css. so far, i've come up with this:
<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"
NavigateUrl="~/Default.asp" CssClass="homeHover" />
my css:
.homeHover { }
.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
.homeHover:Hover { background: url(../images/home_hover.gif) no-repeat; }
well, that does nothing. i don't know css well enough to figure this out. help please. also, i've been asked not to use javascript. i got it working using javascript but i need it to work using css. (or i suppose if i could get this to work programmatically would be okay too but... not sure about that. ) thanks.
Try this:
a.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
a.homeHover:hover { background: url(../images/home_hover.gif) no-repeat; }
The :<state> selector in CSS is what is known as a pseudoclass. Pseudoclasses are special selectors that can match an element based on things like behaviours or relative positions.