How to show images/links on DIV hover? - css

How can I achieve the affect like here on SO when you hover over a comment:
an arrow up to vote up
a flag to mark that message
if you are the comment author you get option to delete as well
How can I make links and images like that show when hovering over a DIV or even a table cell?

Try this:
.comment .button {
visibility: hidden;
}
.comment:hover .button {
visibility: visible;
}
Assuming your HTML is something like this:
<div class="comment">
<a ...><img class="vote button" ...></a>
<a ...><img class="flag button" ...></a>
<a ...><img class="delete button" ...></a>
<span class="comment-text">...</span>
</div>
Andrew noted that this pure CSS solution won't work in IE6. And as Noel pointed out, hovering just isn't an option in mobile browsers. You can use progressive enhancement to have the buttons always visible in those cases.
<style type="text/css" media="screen">
.comment .button {
visibility: hidden;
}
.comment:hover .button {
visibility: visible;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.comment .button {
visibility: visible;
}
</style>
<![endif]-->
IE6 will understand the first style, making the buttons hidden, but not the second, making them visible again on hover. The third style is in a conditional comment, which non-IE browsers and IE7+ will ignore. It overrides the first style, making the buttons visible always.

div:hover {
background-image:url('arrow.gif');
}

The key to what you are trying to do -- as I think the other answers are saying-- isn't to create the content on hover, but to make it "visible" on hover. It's always there, just not in a way the user can see or interact with. So you'd have something like:
<div class="vote_arrow">
<a ...>Clicking on me is fun</a>
</div>
and then a CSS rule like:
.vote_arrow a {
display:none;
}
.vote_arrow:hover a {
display: block;
}
Be aware, though, that this method requires that the user have CSS turned on. Make your hidden content set up in such a way that if I have CSS off, the links still make some amount of sense.

Consider the following HTML:
<div class="special">
<div class="links_holder">
<a class="flag" title="Flag" href="flag.html">Flag</a>
</div>
<div class="content">
Hello, this is my content!
</div>
</div>
You can use the following CSS to hide the links:
div.special div.links_holder {
float: left;
width: 16px; /* For a 16x16 link image */
margin: 0 4px 0 0; padding: 0;
visibility: hidden;
}
div.links_holder a.flag {
display: block;
width: 16px; height: 16px;
overflow: hidden;
/* Move the text out of the way
It's there for screen readers */
text-indent: -9999px;
background: url('flag.gif') top left no-repeat;
}
div.special:hover div.links_holder {
visibility: visible;
}
Note that this will not work in IE6 since IE6 and below only supports the :hover pseudo-tag on <a> tags. In which case you'll need to revert back to a JavaScript solution. Example with MooTools:
$$('div.links_holder a.flag').each(function(el) {
el.addEvents({
'mouseenter': function() {
el.addClass('hover');
},
'mouseleave': function() {
el.removeClass('hover');
}
});
}, this);

Related

Hover caption on image causes big white gap below image

I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!

CSS :hover on link without following (Mobile)

So I have a hover effect on a link.
I know that if you click something on mobile, it activates the :hover attribute.
But, it will also follow the link.
I want to know if there is some way I can have the hover effect appear on mobile and pc alike without having to click and follow the link.
I guess you can use touchstart event
Please see How do I simulate a hover with a touch in touch enabled browsers?
You could refer the code snippet over here
http://codepen.io/mickeykay/pen/wiLno
HTML
<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
<img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
<span class="details">Details go here</span>
</span>
CSS
.container {
position: relative;
}
.container .details {
display: inline-block;
position: absolute;
top: 100%;
padding: 10px 15px;
z-index: 1;
display: none;
width: 200px;
background: #222;
color: #FFF;
}
.container:hover .details,
.container .details:hover {
display: block;
}
/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
display: none !important;
}
Jquery
// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
if ("ontouchstart" in document.documentElement) {
document.documentElement.className += " touch";
}
// Add and remove no-hover class to <li>'s for mobile hover events
jQuery('.touch .container').each(function() {
var div = jQuery(this);
div.hover(function() {
div.removeClass('no-hover');
});
jQuery('*').not(div).bind('click', function() {
div.addClass('no-hover');
});
});

How to reset (undo) a:hover property

In the HTML below, there are three <style> blocks. The second block is the unwanted one, which makes the image disappears when mouse hover. The first two blocks are un-editable. We have to use the third block to cancel out the effect of the second block. Given an example of the third block below, but that does NOT work.
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover {
background-image: inherit !important;
}
</style>
</head>
<body>
</body>
</html>
Thanks very much for you inputs.
Note that, (sorry, i didn't make it clear enough), this is just an example. In the real case, there are many <a> with the first block setting them to different images. Just Only One second block ruins them all. As there are many (unlimited in fact, as it is a dynamic page) <a>, it is impossible to handle them one by one. I wish to have only one third block, that can revert the effect of the evil second block. Thanks a lot.
write:
<style>
a:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
It's a typo: you have one extra } in your style, remove this.
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
it should like this:
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
And also provide background-image url because inherit just inherits from it's parent not previously defined.
I think I understand you now.
Each anchor has a different background image.
Some guy went and set that url to none on hover. (and you obviously have no access to the markup)
Now you want to return that url on hover.
Well, sorry, but as far as I know you can't do this in CSS.
CSS has no 'undo' in this context.
See this SO answer.
If this is the only block of anchor elements you could use nth-child to target the second one.
a:nth-child(2):hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
The anchor element in question must have a value for href so you could target that via the attribute selector
a[href="http://your-website"]:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
If you hover over the second element in the above fiddle, you'll see that hovering over it doesn't make it disappear.
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
.toggle-a:hover {
background-image: inherit !important;
}
.toggle-a a{
float: left !important;
}
.bg-hover{
background-image: inherit !important;
}
</style>
</head>
<body>
<div class="toggle-a">
<a class="overwrite" href="http://www.w3schools.com/"></a>
<div>
<script>
$(function(){
$('.overwrite').mouseover(function(){
$(this).addClass('bg-hover');
}).mouseout(function(){
$(this).removeClass('bg-hover');
});
});
</script>
</body>

Change body bgcolor on hovering a div, using CSS only

I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>​
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}​
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});​
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle

Avoiding copying CSS styles that stay the same for different divs

#world1 {
background: url(/images/home/1.jpg) 0 0 no-repeat;
float: left;
width: 2%;
height: 4%;
position: absolute;
top: 0%;
left: 0%;
z-index: -1;
margin-top: -20px;
margin-left: -20px;
}
#world1:hover {
background-position: 0 -40px;
cursor: pointer;
I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?
Thanks
Also give the div a class, for example: class="worlds".
And put all the generic styling in that class
.world { generic styling }
#wordl1 { custom styling }
Would it be acceptable to add a shared class to all of the #worldN divs?:
.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }
And in your HTML:
<div class="world" id="world1"></div>
<div class="world" id="world2"></div>
Use classes for common style for all divs, and id's for unique style:
HTML:
<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />
CSS:
.myClass
{
///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}
You can group same rules of many elements with their class: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2
ID will be used to apply UNIQUE styles.
Yes, just put everything that's common into a div css optionally giving it a class that the div must include then just add the specialist css to each world div. Note you can also do class="class1 class2 class3" to use more than one css class.
Take a loot at http://sass-lang.com/

Resources