I'm trying to do a menu.
http://jsfiddle.net/yagogonzalez/pVcQG/
I want the image and the text hightlighted at the same time. When the mouse is over the image, the text is highlighted, but when the mouse is over the text, the image doesn't change.
By the way, I'm not able to remove the image border with border-style: none;.
I hope anyone can help me. Thanks a lot!
<div class="iniciocenter">
<div class="bloqueinicio">
<a href="?page_id=7">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
</a>
</div>
<div class="bloqueinicio">
<a href="?page_id=8">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
</a>
</div>
</div>
Style
.iniciocenter {
text-align: center;
}
.imghover2 {
width:190px;
height:190px;
}
.imghover2:hover {
background-position:0px -190px;
}
.handlee{
font-family: handlee;
font-size: 24px;
font-size: 1.714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
.bloqueinicio {
display:inline-block;
text-align: center;
font-family: handlee;
font-size: 22px;
font-size: 1.971rem;
color: #365F8B;
width:190px;
height:50px;
}
.bloqueinicio a {
text-decoration: none;
color: #375F8F;
}
.bloqueinicio a:hover {
color: #FF8000;
}
Add the below to the CSS to get the image highlighted on hovering the text.
.bloqueinicio a:hover .imghover2{
background-position:0px -190px;
}
Demo Fiddle
EDIT: The border appears when the img tag is used without a src attribute (as kind of a placeholder for the image). Here you are placing the image as a background. Hence, my suggestion would be to use an empty div tag instead of the img tag like shown below to do away with that border.
<div class="bloqueinicio">
<a href="?page_id=7">
<div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
</div>
nosotros
</a>
</div>
Demo Fiddle 2
Additional Info: You might want to have a look at this SO thread also prior to implementing the suggestion mentioned in the edit. Basically it says as per HTML 4.01, block level elements weren't allowed inside <a>. But with HTML5, it is perfectly valid.
Change your HOVER rules like this:
.bloqueinicio:hover .imghover2 {
background-position:0px -190px;
}
...
.bloqueinicio:hover a {
color: #FF8000;
}
See the following fiddle: http://jsfiddle.net/H7DFA/
edit .imghover2:hover class like this :
.bloqueinicio a:hover img {
background-position:0px -190px;
}
http://jsfiddle.net/mohsen4887/pVcQG/5/
Related
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 have looked around and cannot find an answer for this, maybe I am just making my code too convoluted.
I have a div that is making up my menu links. The wrapper div will be a link that contains a div for my CCS Circle and a span for my link text:
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>
I am trying to make it so that when I hover ANYWHERE over the wrapper div it changes the color of the shape AND link. So far I have only been able to manage individual hovers on the shape OR the link.
my CSS is:
.menu-circle {
width: 60px;
height: 60px;
background: black;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin:auto;
}
.menu-text{
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
}
.menu-circle:hover{
background:#e7e7e7;
}
.menu-text:hover{
color:#e7e7e7;
}
.menu-item{
text-align:center;
}
you can see the example here
If you want to change the colors when you hover ANYWHERE on the wrapper div then you must call the hover state on the wrapper dive. Like this:
mean-item:hover .menu-circle {change colors here}
This however would only change the circle when hovering anywhere in the wrapper div (the wrapper being menu-item) So you would need a second hover state for menu-text
mean-item:hover .menu-text {change colors here}
See here for working example:
http://jsfiddle.net/s6jkja5r/
Add this code to your style
menu-circle:hover ~ .menu-text{
color:#e7e7e7;
}
DEMO
Try this in your css:
.menu-item:hover div, .menu-item:hover span {
background:#e7e7e7;
color:#e7e7e7;
}
It was a minor CSS change.
.menu-item:hover .menu-circle {
background-color: #f4f;
}
.menu-item:hover .menu-text {
color: #f4f;
}
This fiddle should do exactly what you're trying to achieve:
http://jsfiddle.net/9qg3vjm3/10/
Check this fiddle
This changed css will change the background color of the circle div and the text color only while hovering on the circle div..
CSS
.menu-item:hover .menu-circle{
background:#e7e7e7;
}
.menu-item:hover .menu-text{
color:#e7e7e7;
}
HTML
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>
I've got to design a menu bar which has two actions for it's links
1) Before action where the icon is green
2) On hover the icon should change to it's active version
On changing to active version, I need the text to display too. Like this:
My current HTML for this is:
<div class="span1 but">
<a href="#">
<div class="image-holder" id="about">
</div>
<div class="text-menu" id="about-text">
About
</div>
</a>
</div>
Where span1 is from Bootstrap while but is the css class as follows:
.but{
height:70px;
}
the ID #about is defined as:
#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px;
}
My current problem is such that on hover, I want the text to appear too. The text-box for this is defined as:
.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}
And the ID #about-text is:
#about-text:hover{
color: rgba(0,0,0,1);
}
What should I do to make the text appear along with the image on hover?
Try the following.
#about-text{
display: none;
}
#about:hover #about-text{
display: block;
}
This uses display:none; to hide the text but it shows the text if you hover on #about.
You can also try this.
.text-menu{
display: none;
}
.image-holder:hover .text-menu{
display: block;
You can use visibilityproperty
.text-menu{
visibility:hidden
}
.text-menu:hover{
visibility:visible
}
You have to change your HTML first in order to solve your problem.
<div class="image-holder" id="about">
<div class="text-menu" id="about-text">
About
</div>
</div>
Now add css as below instead of "#about-text:hover"
#about:hover #about-text{
color: rgba(0,0,0,1);
}
This will solve your problem.
I want a button composed of some text and an icon next to it. I can specify that each has a :hover state in CSS to change its appearance, but how can I arrange my CSS/HTML such that rolling over the text appears to also change the image hover state, and vise versa?
Preferably avoiding JS.
Update: The current state of my fiddling around...
<a class="close"><div class="closebutt"></div></a>
a.close {
float:right;
font-size:12px;
color: #a7dbe6;
text-decoration:underline;
}
a.close:hover {
color: #fff;
}
a.vs_rewardClose:before {
content:"Close "
}
.closebutt {
background: url(images/close.gif) no-repeat;
display:inline-block;
width:14px;
height:14px;
}
.closebutt:hover {
background-position: 0px -14px;
}
With your HTML, changing the background-position of the div is just a matter of:
.close:hover > .closebutt {
background-position: 0px -14px;
}
In this way, the background-position changes only when its parent gets hovered.
This is the original answer I posted before you updated your question:
I usually organize my HTML in this way
<a href="#" class="button">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
EDIT: as #Paul D. Waite notes in the comments, this HTML structure is invalid in HTML4 because an a can contain only inline elements. So, to fix this we can change the structure in this way, having spans as children of the a. The CSS remains the same, eventually adding display: block if needed.
<a href="#" class="button">
<span class="glyph"></span>
<span class="text">Button text</span>
</a>
and your CSS in this way:
.button {
/* .. general style */
}
.button > .glyph {
/* .. general style for the glyph, like size or display: block */
background-image: url('..');
background-repeat: no-repeat;
background-position: left top;
}
.button > .text {
/* .. general style for the text, like font-size or display: block */
text-decoration: none;
}
.button:hover > .glyph {
/* .. change the glyph style when the button is hovered */
background-position: left bottom;
}
.button:hover > .text {
/* .. change the text style when the button is hovered */
text-decoration: underline;
}
In this way you can also change the style adding a new class to the button, in this way:
<a href="#" class="button red">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
<a href="#" class="button gray">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
And the CSS
.button.red {
background-color: red;
}
.button.red > .text {
color: black;
}
.button.gray {
background-color: darkgray;
}
.button.gray > .text {
color: white;
}
Enclose both in one element and add :hover to this element:
.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}
In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.
On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:
Example Heading--------------------------------------------
Another Example Heading---------------------------------
One more------------------------------------------------------
So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.
One thing what I was thinking would be this:
<h1><span>Example Heading</span></h1>
when the CSS would look lke this:
h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}
But since the background color can be something else than white (#fff) that doesn't work.
Hopefully you did understand my problem :D
Hacky but, maybe something like this:
HTML:
<h1>
<span>Test</span>
<hr>
<div class="end"></div>
</h1>
And the css:
h1 span{ float :left; margin-right: 1ex; }
h1 hr {
border: none;
height: 1px;
background-color: red;
position: relative;
top:0.5em;
}
h1 div.end { clear:both; }
Fiddle here
This worked for me.
HTML
<div class="title">
<div class="title1">TITLE</div>
</div>
CSS
.title {
height: 1px;
margin-bottom: 20px;
margin-top: 10px;
border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
width: 125px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 22px;
color: #4c4c4c;
background: #fff;
text-align: center;
position: relative;
top: -12px
}
I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.
Click here for jsfiddle demo
html (can be h1, h2 or h3)
<div class="heading-wrapper">
<h1>Example Heading</h1>
<img src="line.png" width="193" height="6" alt="" />
</div>
css
h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
float:right;padding-top:9px;
/*ie9: position:relative;top:-9px */
}
jquery
setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');
function setHeadingLineWidth(selector){
var hWidth;
var lineWidth;
var wrWidth = $('.heading-wrapper').width();
hWidth = $(selector,'.heading-wrapper').width();
lineWidth = wrWidth - hWidth;
$(selector).siblings('img').width(lineWidth);
}
heading width = width of the heading text inside the wrapper
line image width = wrapper width - heading text width
Hope that helps :)