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%;
}
Related
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’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.
I have done box around text. Now I want to be hover and change the color of the box
background. I am not able to change that when mouse hover. I have also attached the
image with this so you can have idea about. I have done box around text. Now I want to
be hover and change the color of the box background. I am not able to change that
when mouse hover. I have also attached the image with this so you can have idea
about.please check the image and found the social media box , when I hover the mouse
the hover color is not changing.
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
</style>
<div class="ex"><span class="iconfacebook2" aria-hidden="true" data-icon="">
</span></div>
*edited to make the image appear
You can use the :hover selector:
http://www.w3schools.com/cssref/sel_hover.asp
But if you are using images, you can apply CSS Image Sprites:
http://www.w3schools.com/css/css_image_sprites.asp
By the way, if you are developing a website, maybe CSS Image Sprites are a good choice to boost the performance of the website (because it uses only 1 native image for multiple image interactions).
;)
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
div.ex:hover {
background-color:#000;
}
</style>
Create a hover element by taking the same css class div.ex and adding :hover
I'm making a menu with an icon and some text, like this:
The problem is, I want the icon to be "highlighted" when I hover over the tab, instead of having to hover above the tiny icon. So this is what happens now:
So my question is how can I hover on one element (the tab is a div), and that activates the hover CSS for another element (the icon).
This is the code for the icon:
(HTML)
<a href="#" class="menubutton">
<span id="playicon"></span> Servers
</a>
(CSS)
#playicon {
width:12px;
height:12px;
background-image:url("img/svg/play2.svg");
background-repeat:no-repeat;
display:inline-block;
}
#playicon:hover {
background-image:url(img/svg/play_hover.svg);
}
Thank you in advance! :)
With the HTML you give, you need to change the second rule to
.menubutton:hover #playicon {
background-image:url(img/svg/play_hover.svg);
}
This rule applies to #playicon when it is a descendant of a hovered .menubutton, which is what you want (using the child selector .menubutton:hover > #playicon might be a good idea, although it won't make any practical difference).
Also, please note that having a <span> like this identified by an id is somewhat strange -- it looks like you would have multiples of this span on the same page, and ids need to be unique. If you do have multiples, replace the id with a class.
#element1:hover #element2
Live example, with more advanced css techniques
Use the :hover pseudo class on the menubutton instead of the icon
#playicon {
width:12px;
height:12px;
background-image:url("img/svg/play2.svg");
background-repeat:no-repeat;
display:inline-block;
}
.menubutton:hover #playicon {
background-image:url(img/svg/play_hover.svg);
}
How Would I make it so that when I click a button, the button stays that color until another button is clicked?
To clarify, imagine you have a text box. When you click it, you can add a border because you have it like input:focus{border:#000} and when the input loses focus or another text box is clicked, the border properties go back to the default.
How would I accomplish this with a button. I feel like I'd need to use :after or something.
My Code
button.top_bar {
background-color:#E3E3E3;
border:#DCDCDC 1px solid;
border-radius:3px;
height:40px;
display:block;
color:#000;
postion:relative;
display:block;
float:left;
top:5;
text-transform:capitalize;
font-family:Arial;
font-weight:bold;
cursor:pointer;
margin-left:15px;
}
button.top_bar:hover {
border:#9F9F9F 1px solid;
}
button.top_bar:focus {
border:#9F9F9F 1px solid;
}
The only way I can think of doing this is with jQuery, or some sort of Javascript. Here's how I would do it: I would control it via a class (let's call it ".selectedBorder"). Then on click, grab all your buttons that you have, and turn off the borders for all of them, then just add it on the clicked one. Here's an example:
//first you grab the click event for the button(s)
$("#buttons").click(function(){
//we remove all the borders from all the buttons
$("#buttons").removeClass("selectedBorder");
//Now we add the border to the button that's been clicked
$(this).addClass("selectedBorder");
});
That should do the trick. Just add that in a javascript tag or an external file and include it, and you should be good to go. Hope that helps.
Unlike text inputs, some browsers don't seem to grant focus when button elements are clicked. Add to your button element an attribute onclick="this.focus()" to force the issue. No jQuery needed :-)