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>
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/
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
Some code...
<a href="#">
<div class="col-md-4">
<img src="image.jpg">
<div class="text">TEXT</div>
</div>
</a>
and some css to start...
.col-md-4 {
background color: #000;
}
.text {
color: #fff;
}
I want to change the col-md-4 IMAGE opacity on rollover. At the same time, i also need the TEXT to change color on rollover.
I can get one or the other working - text or div, but not both.
Any idea what I need to do to target both on rollover?
Based on your comments I believe that this is what you are after.
.col-md-4:hover img {
opacity:0.6
}
This will change the opacity of the image only when the div is hovered.
For the text change
.col-md-4:hover .text {
color: /* other color */
}
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'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/