I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
Related
I would to add my Icon from another link to HTML element, and its clickable.
The icon associated with class, class name icon.
Note:
I need to take icon from another source.
Your suggestion will be advisable
You can use a solution like the following, using a background image:
.icon {
content:"";
width:50px;
height:50px;
background:url('http://placehold.it/50x50');
display:inline-block;
border-radius:50%;
}
I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here
Alright IE8 gurus (does such a thing exist?). I need some assistance in fixing an issue that is a result of using an :after pseudo selector. It's pretty straight forward - just trying to add a border (underline) after a span tag on hover. No, the easy solution isn't just using the text-decoration property because the element inside the span tag is an image (and some other reasons).
Here's the HTML:
<div class="cta">
Hover over me
</div>
And here's the CSS:
.cta { position:relative; z-index:1; display:inline-block; }
.cta:after { position:absolute; z-index:1; left:0px; right:0px; bottom:0px; content:''; border-bottom:1px solid transparent; }
.cta:hover:after { border-color:rgba(0,136,204,.6); }
And for those of you really interested in helping and want to play around with it, here's the fiddle.
Why on earth does that not work on IE8? Works on all other browsers. I've even tried just removing all of the hover nonsense, but I still can't get the border to appear. I've also tried adding a display:block and width:100% to the .cta div per some things I came across on the Internet. No dice.
Any ideas?
IE8 and lower do not support rgba, so try adding a fallback using rgb: DEMO
.cta:hover:after
{
border-bottom:1px solid rgb(0,136,204);
border-bottom:1px solid rgba(0,136,204,.6);
}
Source: http://css-tricks.com/rgba-browser-support/
I have this line of CSS from the Twitter Bootstrap,
.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]
{
background-image:url("http://cdn.mydomain.com/static/img/glyphicons-halflings-white.png");
}
How would I go about making that not apply to .dropdown-menu>li.disabled>a, if the disabled class is present on the li I want it to ignore/not apply that CSS. Is this easily possible?
You could apply the style that you want for the general case to everything, and then, lower down in your script, you could override that with another style for the "disabled" class, that mimics your default behavior.
Something like this: http://jsfiddle.net/8cQvz/1/
div{
display:block;
height:25px;
width: 25px;
background-image:url("image.png");
float:left;
margin:5px;
}
div.no
{
background-image:none;
}