I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}
Related
I would like to display apple in green color (bg color) instead of mango in red colour (bg color) on click on the mango, I know it's possible with hover or using javascript. Is there any way to do it with css on mouse click?
#two
{
display:none;
}
#one
{
background-color :red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
I think you can't do what you want with only CSS, but you can use the :active selector to change it while clicking on it.
See that: http://www.w3schools.com/cssref/sel_active.asp
It depends on what you mean by "click" and "display".
If you mean can you toggle the appearance of the "apple" div by just clicking the "mango" div, then NO...you need javascript.
However, if you just want to see the "mango" div while the mouse button is clicked and held down, then the pseudo-class :active is what you require...in conjuction with a suitable sibling selector.
#two {
display: none;
background: green;
}
#one {
background-color: red;
}
#one:active + #two {
display: block;
}
<div id="one">
<p>mango [click and hold]</p>
</div>
<div id="two">
<p>apple</p>
</div>
Note: This selector only works on siblings...it will not work on the p tag to affect the "apple" div.
which is best to use js for the click purpose.
CSS Only Solution
here is a simple hack to create the click functionality using css
for this purpose.here is a simple hack using checkbox and label.
label {
display: block;
background: red;
}
label:after{
content: "Mango";
}
#demo:checked + label {
background: Green;
color: white;
}
#demo:checked + label:after{
content: "Apple";
}
.hide{
display:none;
}
<input type="checkbox" id="demo" class="hide"/>
<label for="demo"></label>
After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}
In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.