I have a rollover image, and the goal is that when the user mouses over the image, it darkens (which I achieved using a rollover image) and two links appear titled "learn more" and "visit site" (they should appear over the image). Before I get to styling I wanted to make sure everything was working properly, and my issue is that the links don't seem to appear at all. What am I doing wrong that I should fix to be able to see the links when the image is moused over?
The website with the issue is here and you can see if you mouse over one of the images how the link doesn't appear. My code is below.
HTML
<div id="example1" class="good_example"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ABC','','images/examples/abc_website_over.png',1)"><img src="images/examples/abc_website_desat.png" alt="visit site" width="300" height="200" id="ABC"></a>
<div class="options">
Learn MoreVisit Site
</div></div>
CSS
#example1:hover.options {
visibility:visible;
}
.options {
visibility:hidden;
position:absolute;
z-index:9999999;
top:50px;
left:75px;
}
.options a:link {
padding-right:15px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
margin:10px;
color:#ffffff;
font-size:40px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
width:50px;
text-align:center;
opacity:0.7;
background-color:#069;
}
.options a:hover {
opacity:1;
}
There's a problem with your css selector
#example1:hover.options {
visibility:visible;
}
Replace the selector to something like this:
#example1:hover > .options {
visibility:visible;
}
and that should work.
here's a quick sample
you have .options {visibility:hidden;} so it is unseen no matter what content in it. you should at least change it to visible when .options:hover.
Related
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
I want to show a div when I click on the image, but the div id not staying put when I am not clicking on the image similar to this site http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/.
please check my code and update if neccessary thanks! My html code contains a simple div and list items displayed as inline. I used element :active for the pop up when i clicked on the image, but when i clicked on the image the div does not hold for the user to click on the nav links.http://jsfiddle.net/7KJy4/
My html
<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
<div id="menu">
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
</div>
</div>
my css
*
{
margin:0;
padding:0;
}
#hover
{
width:100px;
height:300px;
}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
#menu
{
visibility:hidden;
}
li
{
}
If you want to do it in pure css, you have to use :focus instead of :active and focus on the image:
#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
You will also need to add "tabIndex" to the image so it can receive focus.
DEMO: http://jsfiddle.net/7KJy4/1/
The side-effect of this approch - user can Tab into the image so your menu can be activated by keyboard as well.
If you want to to it on click without above approach you will have to use some JS.
Was just amusing myself with a little useless site, practicing this and that.
I came across a problem, where the link is only clickable on the left, not the right.
how it looks:
div, inside it a header(2) with in it a link
<div class="button one"><h2>example</h2></div>
It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!
For those who want to look into the css and html files themselves, i put them in a test.rar file:
http://www.sendspace.com/file/pe42e0
It's because the image #content_image_1 is positioned above your buttons. If you remove the z-index: 1; from that image, your buttons work as intended. Albeit with your image behind the buttons.
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover
Site navigation html:
<div class="main_nav">
<div>Home</div>
<div>Company</div>
<div class="active">Franchise</div>
</div>
When a link is hovered it gets a specific background color.
My question is, how can I keep this hover state while the clicked page is loaded and the old is still displayed? I mean you hover a link item, the background changes, you click the background changes to default and the new site starts loading.
This is not necessay when the new page is loaded fast so you not really see the difference. However I am curious to know if this is possible with just css techniques.
Any ideas?
My css:
.header_wrapper .main_nav div a:link{
display:block;
text-decoration:none;
color:#f5f5f5;
}
.header_wrapper .main_nav div.active a:link{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:hover{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
.header_wrapper .main_nav div a:focus{
color:#f5f5f5;
background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}
Hey now used to focus properties as like this
a:focus{
// css properties
}
Live demo
Try like this..
If you are having a class for your <a> tag than use this :
a.classname:focus {
color: /*whatever you want*/ ;
}
If you want to apply all <a> than use this :
a:focus {
color: /*whatever you want*/ ;
}
try this:
<div class="<?=($_REQUEST['args'] == 'franchise')?'active': ''?>">Franchise</div>