I'm trying to have the links for AgentSheets, Gimp, and InkScape to show when the link for Portfolio is hovered. I've achieved that, but whenever the mouse is moved from portfolio, to click one of the links, they disappear because Portfolio isn't being hovered over anymore. Anyone have any advice? Thanks!
CSS:
#portfolio:hover + #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
width:70px;
display:inline;
}
HTML:
<div id="portfolio">Portfoliodiv>
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
To have this effect work the portfolio2 div should be inside the main div
HTML
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
CSS
Then the CSS becomes
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
display: inline-block;
border:1px solid red;
}
Note: this will cause the parent div to change in size which may not be what you need.
JSfiddle Demo
I see that you used display: inline on the #portifolio div so the links would be sided. But that actually keeps your hovering to work well.
You can use white-space: nowrap instead, so the <a> links would remain inline. Also, remove the css + selector, because it is not for this scenario.
So your css code would be:
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
white-space: nowrap;
}
#portfolio {
width:70px;
}
Also, you have to correct the html:
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
Here's a fiddle: http://jsfiddle.net/G3S82/
A similar solution. Again, you must put the hidden DIV inside the visible one. And use this CSS, which maintains the desired (fixed) width of your elements:
#portfolio {
width:70px;
background: green;
}
#portfolio2 {
display:none;
width: 200px;
background: lightblue;
}
#portfolio:hover > #portfolio2 {
display:block;
}
http://jsfiddle.net/sLLQA/1/
1.Your closing div after Portfolio < /a> is not closing properly.
2.You have to remove the second closing div at the end of the script.
Related
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I've styled a <p> tag which behaves as a cart button.
Now I want to make a pop up box which will appear on hover of the <p> tag containing cart details in it.
HTML
<div id="product_list">
<p class="poverlay" style="display:none;">Cart Details</p>
test elements test elements test elements test elements test elements
</div>
CSS
<style>
#product_list{
display:block;
z-index:1;
width:100px;
height:100px;
border:1px solid #ccc;
padding:10px;
}
#product_list:hover > p.poverlay {
display:block !important;
top:0px;
left:0px;
position:absolute;
padding:10px;
color:#f00;
font-weight:bold;
z-index:2;
}
</style>
You can use something like this in your CSS:
Your pop up starts hidden:
#popupId{
display: none;
}
You make it appear when you hover your p element
p:hover #popupId{
display: block;
}
And you fill it with the information you want to show.
yeh I did it !!!! in the way I want.
Thanks all Josh ,Ankit, thriqon , punitha
My site: www.pkgeek.com
Just scroll down to the footer and you will see Powered by and on the next line you will see two icons (Blogger icon and namecheap icon). I want these icons to be displayed next to Powered by: (Not on the next line).
My HTML Code for these icons and the footer Powered by links:
Powered By: <div class="div123">
</div></div>
CSS CODE:
.div123 {
}
.blogger {
background:url('http://2.bp.blogspot.com/-EcPHtL7JRak/Uz8VLVBfGCI/AAAAAAAAAoc/WOHpaJy7hxg/s1600/blogger.png');
background-position:0 0;
width:25px;
height:25px;
display:inline-block;
}
.blogger:hover {
background-position:0 25px;
}
.namecheap {
background:url('http://1.bp.blogspot.com/-GOvEY9lWKkU/Uz8VNmQMq5I/AAAAAAAAAok/RRLbRx_EDYc/s1600/Namecheap.png');
background-position:0 0;
width:35px;
height:20px;
display:inline-block;
}
.namecheap:hover {
background-position:0 20px;
}
I think you need to give the following css property float:left to the **two pictures and the text. Edit the html to this and it works:
<div style="float:left;"> Powered By:</div> <div class="div123">
</div></div>
remove the width for the div poweredbylinks and add the properties: .poweredbylinks{ vertical-align:top; line-height:25px; } and for the div .div123 remove the width, float and the height, and set his styles to: .div123{ display:inline-block; }
Replace div by this:
<div class="poweredbylinks">
<div style="float:left">Powered By:</div> <div class="div123">
<i class="blogger"></i>
<i class="namecheap"></i>
</div>
</div>
You can just add style=" display: inline; " to your divs like this: jsfiddle
I have such a div:
<div class="game_img_div">
<a href="./play.php?game=free-kick-fusion">
<img class="gamethumb" src= " ./images/thumbs/free-kick-fusion.jpg">
</img>
</a>
</div><!--game_img_div-->
and the .CSS only contains
img.gamethumb
{
height:6em;
}
So the picture resizes according to its aspect ratio, say it has dimensions (6em,Yem).
I want the ".game_img_div" to also have the dimensions (6em,Yem).
How can I do it? Thanks !
img.gamethumb {
height:6em;
}
div.game_img_div {
float:left;
}
Change the display type of the container div:
.game_img_div {
display: inline-block; /* `display: table` also works */
}
http://jsfiddle.net/S8GK4/
This will do the trick.
.game_img_div { float:left; }
img.gamethumb { float:left; }
http://jsfiddle.net/95ZUw/
try for css:
div.game_img_div {width:auto; display:block; position:relative}
img.gamethumb {height: 6em; max-width:100%;}
and the img tag it's without </ img>