I have the html code something like this:
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
I need to change background of li in blue color and everything inside of them to be color:white on mouse hover on the li element.
See this fiddle, you need to set background blue for li:hover, and li:hover * to be color white
li:hover {
background: blue;
}
li:hover,
li:hover * {
color: #fff;
}
<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>
Put the following in a <style> element or a .css file:
li:hover {
background-color: blue;
color: white;
}
Because all child elements inside <li> inherit the properties of their parent, they will have a white color (and a blue background too if they don't specify their own).
Related
I am struggling to make my <a> take 100% height of <li> element and i want to do this because when i hover over <a> i want it to get background color and to change its color to white.
this is how it should look like
I have tried giving my <a> height:100%
but this is my result
on second picture i cut out the piece and zoomed it in so you guys can see better
i found one answer on other stack overflow thread where you would give <ul> display:table and give height:0 and then give <li> height:100% but it doesnt work for me.
PLEASE NOTE THAT IM USING BOOTSTRAP 4.0.0alpha and SASS(SCSS)
HTML
<div class="topContact hidden-md-down">
<div class="container">
<div class="row">
<ul class="contactInfo">
<li class="d-inline-block"><i class="far fa-envelope"></i>info#reen.com</li>
<li class="d-inline-block"><i class="fas fa-mobile-alt"></i>+00 (123) 456 78 90</li>
</ul>
<ul class="socialIcons ml-auto">
<li class="d-inline-block"><i class="fab fa-facebook-f"></i></li>
<li class="d-inline-block"><i class="fab fa-google-plus-g"></i></li>
<li class="d-inline-block"><i class="fab fa-twitter"></i></li>
<li class="d-inline-block"><i class="fab fa-pinterest-p"></i></li>
<li class="d-inline-block"><i class="fab fa-behance"></i></li>
<li class="d-inline-block"><i class="fab fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
SCSS
.topContact{
background-color: #f5f7fa;
border-bottom: 1px solid #e6e9ed;
ul{
padding:0px 15px 0px 15px;
margin:0;
}
a:hover{
background: indigo;
}
a{
height: 100%;
}
.contactInfo li,
.contactInfo a,
.socialIcons a{
font-size: 10pt;
color: #506a85;
}
.contactInfo a:hover{
text-decoration: none;
color: #00bc9c;
}
.contactInfo svg,{
margin-right: 8px;
}
.contactInfo li{
padding-right: 20px;
}
}
In order for a child element to assume 100% height of the parent element, the parent element must have its size set. Its not enough to give your <li> element a font size for its <a> child to extend its height to cover it. The <li> must inherit the height from its parent or have it defined. Also, your <a> element must be a block or inline-block element to accept height.
Try:
<style type="text/css">
ul#socialIcons, ul#socialIcons>li { margin:0px; padding:0px; list-style:none; }
ul#socialIcons>li>a { display:block; font-size:1em; margin:0px; padding:0.5em; }
</style>
Also I recommend that you take a look at the concept of HTML box model: https://www.w3schools.com/css/css_boxmodel.asp
I have an anchor like this:
<a href="#">
<i class="ico01"></i>
<span>Text</span>
</a>
ico01 applies an image with CSS sprite. I would like to change the background color of the anchor content (span + i) on mouse over, however it just applies to the text (span). Is there any trick that I`m missing?
Here`s a JS Fiddle. I need the background not only in the span, but also wrapping the image:
https://jsfiddle.net/0esbmusq/1/
Thanks in advance
a {
display:block;
}
a:hover {
background-color:black;
}
Try this:
a{
display:block;
}
.ico01 {
background: url('https://download.seaicons.com/icons/marcus-roberto/google-play/512/Google-Chrome-icon.png') no-repeat -10px -24px;
width: 492px;
height: 488px;
display:block;
}
a{
display:block;
}
a:hover {
background-color:red;
}
<a href="#">
<span>Google</span>
<i class="ico01"></i>
</a>
You mean?
a:hover span{background-color:black};
<a href="#">
<i class="ico01"></i>
<span>Text</span>
</a>
You need to use display:block for link.
I used Font Awesome for the icon and in the hover it is what I like this resultsenter image description here
and also I have this problem when a link is selected that is what I have enter image description here
I use bootstrap
.nav > li > a:hover
{
background-color: transparent;
}
.iconetwitter
{
color: #ffffff;
width: auto;
height: 33px;
position: relative;
border-radius: 5px;
transition: background-color color 0.2s, font-size 0.2s , ease-in-out;
}
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active
{
color: #1DA1F2;
background-color: white;
}
<ul class="nav">
<li class="contacteicone col-md-3">
<a href="#" class="monicone">
<span class="fa-stack fa-lg">
<i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i>
</span>
</a>
</li>
</ul>
Got it...
The strange hover state is caused by the background color of your font-awesome icons. The background is larger than the character. Correct this with line-height, like this:
.fa {line-height: 0.85em;}
Or use the nicer solution is described here: https://stackoverflow.com/a/27382026/2397550. Then you should use this icon for the underlying square: http://fontawesome.io/icon/square/
The white area behind a focussed icon is because you did this:
.nav > li > a:hover {background-color: transparent;}
This should be:
.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}
How can i make it work so that when i hover my li > a it also changes color on my glyphicon. I have listede below my html and what i tryed to do in css. But that does only change it if i hover the glyphicon and not the a. And yes i have also tryed to change it on my a but that dosen't effect my glyphicon.
Html:
<li class="pushy-item">
<a href="#">History
<span class="glyphicon glyphicon-list-alt opacityDown pull-right"></span>
</a>
</li>
Css:
ul > li > a > .glyphicon:hover{
color: orange;
}
`
You can try this:
ul > li > a:hover > .glyphicon
div > .glyphicon-heart:hover {
color: rgb(102, 102, 101);
cursor: pointer;
}
<div class = "heart">
<span class = "glyphicon"
[class.glyphicon-heart] = "isLiked"
(click) = "onClick()" >
</span>
</div>
Here is my html
<div class="pure-u" id="menu" data-ng-controller="gotoUrl">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading"
href="#">PennyTracker</a>
<ul>
<!-- Add Transaction Button -->
<li>
<button
class="pure-button pure-button-success pure-button-large"
data-ng-click="setRoute('new')">
<i class="icon-plus"></i>
Transaction
</button>
</li>
......
</div>
and here is the css I try to change the color when hover on li
.pure-menu li.hover {
background: red;
color: #000000;
}
But I see no red color when I hover, I see
What is that I am doing wrong?
You must put : instead of . ,hover is not a class.
.pure-menu li:hover {
background: red;
color: #000000;
}