I have span and image inside anchor tag, the problem is when I hover them they does not hover as one.
<a href="">
<img src="image"/>
<span>Shopping Cart</span>
</a>
a :hover {
opacity: 0.6;
}
Fiddle
any help would be appreciated. thank you.
In a :hover, you are selecting a descendant of an <a> element that is being hovered. That's why they activate separately. If you remove the space (a:hover), it will select the <a> that is being hovered, which is what you want.
problem is your space between a and (:)
<a href="">
<img src="image"/>
<span>Shopping Cart</span>
</a>
a:hover {
opacity: 0.6;
}
see demo http://jsfiddle.net/JentiDabhi/7ondpajd/
You could include the <img> in your <span>:
<a href="">
<span><img src="image"/>Shopping Cart</span>
</a>
a :hover {
opacity: 0.6;
}
<a href="">
<span><img src="image"/>Shopping Cart</span>
</a>
Related
I'm trying to add sprite images to the menu items in wordpress/ubermenu.
The custom class:
#menu-item-4.sprite.icon-image a > img:first-child
{ background-position: -161px 0px!important; width: 22px; height: 22px;}
is applied to
id="menu-item-4"
It should affect only the first image element, instead the style is applied to most images menu-item-4.
How to select this specific image?
<ul class="menu-id-1">
<li id="menu-item-2">
<ul class="submenu-id-3">
<li id="menu-item-4" class="sprite icon-image"> <-- Costum CSS Class added here
<a href="">
<img> <-- CSS to select this element only
<span></span>
<span></span>
</a>
<ul class="menu-submenu-id-5">
<li id="menu-item-6">
<a href="">
<img> <-- This element will have other icon
<span></span>
<span></span>
</a>
</li>
<li d="menu-item-7">
<a href="">
<img>
<span></span>
<span></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Your CSS selector selects all img-tags, that are directly a child of an a-tag inside your #menu-item-4.
try this:
#menu-item-4 > a img
{ background-position: -161px 0px!important; width: 22px; height: 22px;}
Its probably better to add classes to a-tags or the img-tags
Remove the *:first-child at the end. Your > selector is searching for the first image that appears inside your anchor and the *:first-child selector is confusing its path since there are no child elements for this image.
Your selector should be something like this:
#menu-item-4.sprite.icon-image a > img
This literally means - find and apply only to, the first image that you come across.
I suggest that you add a class to your anchor and simply address that.
e.g.
#menu-item-4.sprite.icon-image .anchor-class > img
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security" class="footer-icons">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text {
color: red!important;
}
But this is not working maybe someon could help me out on this?
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text {
color: red !important;
}
Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text {
color: red !important;
}
Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
I like the :nth-child(n) selector:
a.ui-btn-active > span:nth-child(1) {
background: red;
}
Can anyone see what I am doing wrong here?
I have some text elements inside an <a> which I want text-decoration:none on when the <a> is hovered over. See HTML below, which I believe should work, but when I mouseover that <a> the text is still underlining child <h2> and <p>.
HTML
<a href="" class="link-box">
<div>
<span class="icon-stat"><i class="fa fa-users"></i></span>
<h2>Membership Management</h2>
<p>Some text here</p>
</div>
</a>
CSS
a.link-box:HOVER h2, a.link-box:HOVER p {
text-decoration: none;
}
a:hover{
text-decoration: none;
}
Try it
http://jsfiddle.net/L3pxr0tx/
What is the simplest way to fade my 3 images into grayscale when hovered upon. This is for my footer.
Here is my html code:
<ul class="review-icons">
<li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
<li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26">
</a>
</li>
<li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
</ul>
my CSS so far:
ul.review-icons > li {
display: inline;
list-style: none;
margin: 15px;
top: 5px;
position: relative;
}
what it looks like in fiddle:
http://jsfiddle.net/FLBRG/2/
** extra - is it possible for the grayscale to scroll in from bottom to top
Plz n Thx
One easy way (but depends on your background color being white):
ul.review-icons > li:hover {
opacity: 0.5;
}
I want my navigation to look like this:
<icon> <icon> <icon>
Title Longer Title Title
Ideally, I want my code to look like:
<li>
<img src="images/icon.png" />
<a class="link_title">Title 1</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 2</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 3</a>
</li>
I already have it horizontal, but not sure how to get the link to appear right under the icon, without using a table, which I don't want to do. (Let me know if I must, though.)
li { text-align:center; }
li a.link_title { display:block; }
Also, you're closing your <a> tags with a </span>. This needs to be corrected:
<a class="link_title">Some Text</a>
try this:
li {
float:left;
text-align:center;
}
li a {
display:block;
}
li img {
margin:0 auto;
}