I have a button in my web page with class "btnNewL1" . my CSS class is as below
.btnNewL1
{
background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}
When user place the mouse over the button,i want to chnage the appearance like change of bg image and chnage of border color etc... . I want to do this will CSS itself. and it should be be supported by IE6 IE 7 ,Firefox
How to do this ?
Unfortunately :hover pseudo selector is not supported by IE6 on any other element than <a>.
If you wish to implement :hover on IE6, you can:
a) If possible, change your <input
class="btnNewL1" type="button"
value="click me!" /> to <a
class="btnNewL1" href="#">click
me!</a>. You will need to add display:block, and few other CSS rules. This will simply 'simulate' button using <a> tag. This is not perfect solution because sometimes you must use proper <input> (i.e. when using asp.net controls).
b) Use javascript to make workaround, example in jQuery is:
<script type="text/javascript">
$(document).ready(function(){
$("input.btnNewL1").mouseover(function(){
$(this).toggleClass('buttonSelected');
}).mouseout(function(){
$(this).toggleClass('buttonSelected');
});
});
</script>
<input type="button" value="click me!" class="btnNewL1" />
c) Wrap your code like that:
<a class="acont" href="#"><input type="button" value="click me!" /></a>
So you will be able to use CSS:
.acont:hover input { background:red; }
This will do the job, but as far I remember this is not valid HTML (<input> should not be placed inside <a> tag)
Which one you gonna choose - up to you. Main point from this post is, again: :hover pseudo selector can be used on IE6 only on anchor elements
Have a look at pseudo-classes
.btnNewL1:hover{
background: url(../images/different.png);
}
This SO question "How to use ‘hover’ in CSS" might help you.
I think what you are looking for the :hover class.
Here is an example at w3schools.
The example is for color, but I believe you can do this with other styles.
You want the :hover pseudo-class. Use .btnNewL1:hover { ... } for your mouse-over styles.
See also the CSS2 spec for more info on pseudo-classes.
Combine the tw images into one and then change the background position.
CSS sprite
CSS Sprites: Image Slicing’s Kiss of Death
Related
Hey im trying to change this (working) line of code here:
*<a href="DPS_Guitarspg3.html">
<button style="background-color:rgb(0,0,5)"; type="button"> <p style="color:rgb(111,0,100);"> Guitars</p></button> </a>*
Into an equivalent statement w this kind of format(utilizing a class) here:
*<a href="DPS_Guitarspg3.html">
<input type="button" class="inline" id="redirectButtons">
</a>*
My question is how/where to type in the colored text("Guitars") used in the aforementioned code block in the latter code block. Sorry if this is a bad question, I am awful with HTML. Thanks in advance.
Or, you can style the <a> tag to look/act like a button. Just use the :hover and :active, like this
.aBtn{
padding:5px 10px;
text-decoration:none;
color:rgb(111,0,100);
background-color:rgb(0,0,5);border:1px solid transparent;
}
.aBtn:hover {color:white;}
.aBtn:active{border:1px solid orange;}
<a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a>
You want a button to function as a hyperlink. To give you full styling control over the button, you could make the button an image file and put the image file inside your hyperlink.
<a href="DPS_Guitarspg3.html">
<img src="image-of-button.png">
</a>
Alternatively, you could use a front-end library like Bootstrap.
I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".
But I do not want to change color if the element also has "reMode_selected"
Note: I can only use CSS not javascript because I'm working within some sort of limited environment.
To clarify, my goal is to color the first element on hover but not the second element.
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
I tried below hoping the first definition would work but it is not. What am I doing wrong?
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
One way is to use the multiple class selector (no space as that is the descendant selector):
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
In modern browsers you can do:
.reMode_hover:not(.reMode_selected):hover{}
Consult http://caniuse.com/css-sel3 for compatibility information.
Method 1
The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected. So the first part of getting your code to work correctly is by removing that space
.reMode_selected.reMode_hover:hover
Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-color property. So the final code will be
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
Fiddle
Method 2
An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don't have a class of .remode_selected
Fiddle
However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.
Method 3
A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support
Fiddle
On page 1 there is a link which takes you to a certain point on page 2
MY TEXT HERE
This takes you straight to the anchor (position) on page 2 with the following code
<a name="position"> MORE TEXT HERE</a>
Now, my question is how can I change the text and background color when #position is in the URL?
For example: www.domainname.com/page2.html#position
This is the CSS I used but doesn't work:
#position {
color:#ff0000;
background-color:#f5f36e;
}
Here is a example http://jsfiddle.net/jvtcj/2/
Thank you in advance!
Use the :target selector:
a:target, /* or simply */
:target {
/* CSS to style the focused/target element */
}
You'd be better off using the id of a particular element to receive the focus, since named-anchors seem to have been dropped, if not deprecated entirely.
References:
CSS selectors, level 3.
You can use the CSS3 :target peseudo selector: http://blog.teamtreehouse.com/stay-on-target
Also, don't use the old myth <a name="destination">...</a>, all you need is to id the section you want to jump to, e.g. <section id="destination">...</section>
MY TEXT HERE
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>
... in css:
a[name=position2]:target{
background-color:green;
}
Try using
<a name="position" class="position"> MORE TEXT HERE</a>
And in CSS use
.position {
color:#ff0000;
background-color:#f5f36e;
}
http://jsfiddle.net/jvtcj/4/
Add an id to the tag.
You can see how here using your example
http://jsfiddle.net/h5NZh/
<a id="position" href="#position">MY TEXT HERE</a>
For my curiosity, given a CSS-only button markup like this one: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043, one can create a button visually using:
<div class="button">Click</div>
But how can we actually make it functional? For example, make it link to some other page, so when user clicks on it, she gets redirected.
I've tried wrapping a <a href> inside the <div>, but the button text shows up as a link, which is undesirable. I also tried the opposite - wrapping the <div> inside a <a href>, which seems to work but I was told this is not valid html code.
Any other suggestion?
P.S. The targeted browsers would be IE8+, chrome 14+, Firefox 11+, Safari 5+ and Opera 11+, if this makes any difference.
Have you tried changing the
<div class="button">Click</div>
into <a class="button" href="#your_link">Click</a>?
It should work as a normal link, and have the css buttons stylings and expected behavior.
Use JavaScript to bind an action to the button.
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
document.location.href = "newpage.html";
});
Add to the css:
a.button { text-decoration: none; }
To create button links:
<a class="button" href="/somewhere.html">Somewhere</a>
Using JavaScript, specifically jQuery, you can do
<div class="button" id="myButton">Click</div>
$("#myButton").click(function()
{
location.href = "mypage.htm";
});
I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:
<p style="font-size: 24px">asdf</p>
What's the syntax for embedding a rule like:
a:hover {text-decoration: underline;}
into the style attribute of an A tag? It's obviously not this...
bar
...since that would apply all the time, as opposed to just during hover.
I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.
I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it
Edit: I just did a quick test with this:
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>
And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?
If you are only debugging, you might use javascript to modify the css:
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
A simple solution:
My Link
Or
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
My Link
If it's for debugging, just add a css class for hovering (since elements can have more than one class):
a.hovertest:hover
{
text-decoration:underline;
}
blah
I put together a quick solution for anyone wanting to create hover popups without CSS using the onmouseover and onmouseout behaviors.
http://jsfiddle.net/Lk9w1mkv/
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
If that <p> tag is created from JavaScript, then you do have another option: use JSS to programmatically insert stylesheets into the document head. It does support '&:hover'. https://cssinjs.org/