I don't understand why does this work :
.button:active {
position:relative;
top: 2px;
left:2px;
}
But this wont work :
.button:hover {
font-size:17px;
}
It works when I use id but I want it to activate for all buttons :
#btnhome:hover{
font-size:17px;
}
This works fine but with class it wont? What am I doing wrong?
Using id and it works so sure something has to do with the specificity, over riding, try this
Demo
Demo + !important
.button:hover {
font-size:17px !important; /* Actually you don't even need !important */
}
Try:
.button *:hover { font-size:17px; }
Definitely there is an external .css file included by you via using link tag, in which .button:hover {font-size:somethingelse !important;} is defined. That's why you can't change it unless using !important again.
It is specificity. The ID is taking precedent over the pseudo style. You need to either re-write the CSS to be more general, and only put the unique values on the IDs or use the IDs plus the pseudo selector.
I took the common stuff from the ID's and moved them to a base .button class:
.button{
width: 84px;
height: 46px;
background-color:#000;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
.button:hover {
font-size:17px;
}
Check out this fiddle to see it in action: http://jsfiddle.net/kJfmR/
If anyone is still facing the same problem:
I had one similar to the above, my code was like this:
<style>
.btto:hover{
background-color: grey ;
cursor: pointer;}
</style>
<body>
<button class="btto" style="color:white;
background-color:black;
padding:4%;
width:50%;
border:none"> Buy Tickets </button>
</body>
I think background-color of button inside body was overriding the one inside style
so what i did was:
<style>
.btto{
color:white;
background-color:black;
padding:4%;
width:50%;
border:none;
}
.btto:hover{
background-color: grey ;
cursor: pointer;
}
</style>
<body>
<button class="btto">Buy Tickets</button>
</body>
Related
I have the following problem and it drives me crazy:
Basicly I have a div-container with an background. This background should change when I hover it (see pichture). It is an png and instead of white it should turn red.
What I have done until now:
First: CSS sprite
Thought it will be the best solution but becuase the div changes it's size (responsive) and the icon does not have a fixed size it was not very clean: I had a small offset on hovering. Not sure why… mybe this can be fixed…
Second: 2 separate images
But this is not an option in this case because I need to work with inline styles. :hover ist not available as inline style.
Thrid: tried mask-box-image
Was a woderful solution… but Firefox does not support it.
Does anyone has another idea how to solve it?
Give This a Try
CSS
.icon-cont{
height:300px;
width:300px;
background-color: #ff0000;
text-align:center;
}
.icon-cont:hover{
background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
border-color:#ff0000;
}
.icon{
height:0px;
border-bottom:2px solid #fff;
width:60%;
line-height:300px;
position: relative;
margin:auto;
top:50%;
}
.icon::before{
content:"";
position: absolute;
top:0;
bottom: 0;
left:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
.icon::after{
content:"";
position: absolute;
top:0;
bottom: 0;
right:-30px;
margin:auto;
height:20px;
width:20px;
border:2px solid #fff;
border-radius:50px;
}
HTML
<div class="icon-cont">
<div class="icon"></div>
</div>
Link for reference
hope this helps..
May be it will help
I posted an example following
.box {
padding: 20px;
display: inline-block;
background:tomato;
}
.box:hover {
background: transparent;
}
.box:hover span {
color: tomato;
}
.box span {
display: inline-block;
color: #fff;
}
<div class="box">
<span>a</span>
<span>----</span>
<span>b</span>
</div>
You can't change color of .png with css. I think you should make a font out of your icons in order to change their color with css later.
I haven't done that myself, but I know those fonts, like font-awesome can change color. There are some automatic generators in google to make your own font.
Try this.
I would like an easier / efficient way to edit the CSS of the <img class "search-button> when hovering over <button class="search-button"> instead of changing the search-button itself like I have done below.
The fact that the img is changing height and the button isn't is also bizarre to me. I would think changing the height attribute would change the height of the button and not the height of the img
Is it possible to do without using Javascipt and a pure CSS method? An explanation would be appreciated as I am self-studying and more information is far valuable than just a solution.
After fix and edit - My Question : Could it be simplier?
HTML
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
CSS
search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
height:80%;
}
.search-button:hover .search-button-img { /*Fixed hover space */
margin-top:-1px;
margin-left:-1px;
height:100%;
}
Original : http://jsfiddle.net/x8xwxg3z/
Updated (Working Well) : http://jsfiddle.net/x8xwxg3z/5/
*random magnifier image for example
Use Tramsform scale
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button-img:hover {
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button"><img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt=""></button>
Or apply the :hover on the parent
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button:hover .search-button-img{
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
your problem is from the space between :hover and your class so remove the space
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
So if I understood you right, you want only the image to become bigger, but not the button?
You could try the following:
.search-button:hover .search-button-img {
height: 90%;
}
instead of:
.search-button :hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
This won't work, because you're using a space between the class/selector and the pseudo class. In CSS you write selector:pseudoclass as soon as you use a space, CSS interprets that as a child. So .foo .bar would adress the div with the class bar in <div class="foo"><div class="bar">Baz</div></div>. CSS Selectors can be ID's, Classes or simply selectors. Classes are adressed by a . in front and IDs by a #. I hope this helps.
With CSS you are able to adress a child element like the image. And it's Javascript, what you meant not Java ;)
try this : http://jsfiddle.net/x8xwxg3z/3/
and css code is here:
.search-button {
padding:0px;
margin:0px;
width:105px;
height:105px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
position:relative; transition:all 0.5s ease-in 0s;
}
.search-button-img {
height:50px;
position:absolute; top:10px; left:20px
}
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:500px;
width:80%;
}
I think that you want is to make bigger the button without making bigger the image. The image is getting bigger because it has a % size (it depends of his parent, in this case, the button).
Anyway:
.search-button:hover{} refers to: when you hover over the button do this to the button.
.search-button:hover .search-button-img{} refers to: when you hover over the button do this to the image.
Then you only need the change, that you want to do.
I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}
Is this possible to create following effect using CSS. I only have a H2 element in HTML, and i do not have any control on HTML of the page. I can only change CSS.
I tried it with :before and :after but no success so far.
This will be used in a CMS, so i can not be sure how or where end user will be adding headings.
I think your best shot would be (since you cannot edit any of the HTML and you want a CSS only solution) to play a little with the position and z-index of the container and the h2:after pseudo element:
HTML:
<div id="wrapper">
<h2 class="heading">New Collection </h2>
</div>
CSS:
#wrapper {
width:100%;
height:800px;
background:green;
position:relative;
z-index:-2;
}
.heading {
display:inline;
background:green;
}
.heading:after {
content:'';
display:inline-block;
width:100%;
height:20px;
background:#d3d3d3;
position:absolute;
right:0;
z-index:-1;
}
Check this FIDDLE, I know it's not that fancy, but I think you cannot do more than that using CSS only.
Hope this helps.
The simplest way that I know of is to put a span inside of the H2, but still around the inner text, then apply one style to the span and one style to the H2.
EDIT: You can use a little bit of jQuery to add the span inside your H2 tags.
HTML:
<h2><span>New Collection</span></h2>
CSS:
h2 {
font-family: sans-serif;
font-weight: normal;
font-size: 16px;
background: #eee;
color: #999;
}
h2 span {
padding-right: 10px;
background: #fff;
}
jQuery:
$(document).ready(function() {
$('h2').each(function() {
var title = $(this).html();
$(this).html('<span>' + title + '</span>');
});
});
Here's a Demo
Is there a way to turn this feature off? Contents of <button> are always vertically centered, as opposed to what happens in a regular HTML tag.
Demo: http://jsfiddle.net/HbqnR/
I want <button> behave like <a>, with the text at the top left corner of the button.
I'm looking for a WebKit specific fix, maybe there is some -webkit-* css property that controls this behavior. Hacks are welcome but without using additional markup!
Thank you in advance :)
.button
{
display:inline-block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:middle;
padding:20px;
box-sizing:border-box;
text-decoration:none;
width:200px;
text-align:left;
}
<button class="button"><button></button>
<a>
Add this:
button:before {
content:'';
display:block;
margin-top:-50%;
}
See http://jsfiddle.net/r6yXw/
And, if you want it to only apply to webkit based browsers, wrap it in
#media screen and (-webkit-min-device-pixel-ratio:0) { ... }
see http://jsfiddle.net/r6yXw/1/
I see that you requested no additional markup, but if you decide to go down that route, one quick idea is to use positioning and one additional element.
button {
position: relative;
}
button > span {
position: absolute;
top: 0;
}
<button><span><button></span></button>
You can't. Not without introducing a <span> inside the <button> and use positioning:
<button class="button"><span><button></span></button>
Then add the following to .button:
.button
{
/* ... */
position:relative;
}
.button > span {
position: absolute;
top: 20px;
left: 20px;
}
Demo
If you want to keep your HTML intact, you can modify the document using JavaScript as well:
$('button.button').wrapInner('<span>');
Note that if JavaScript is disabled, it won't work :)
button {
height: 100px;
display: flex;
}
Check this out :P JSFIDDLE DEMO
.button
{
display:block;
height:200px;
border:4px gainsboro outset;
background:silver;
vertical-align:top;
padding:20px;
box-sizing:border-box;
width:200px;
text-align:left;
text-indent: 0;
white-space: normal;
word-spacing: 0px;
letter-spacing: 0px;
float: left;
top:0;
}
It might work heh. I don't really know what do you need the button for. But this gets to see just like what you were asking before.
Used it here.
<title>Documento sin título</title>
<body>
<form id="form1" name="form1" method="post" action="">
<button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></button>
</form>
</body>