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.
Related
I have searched both here and elsewhere on the internet for an answer, but have not found anything that has solved my problem. I also tried to include relevant code only, but I am sorry if I included something irrelevant.
I have made a navigation bar with 4 alternatives (or 4 buttons, if you prefer), where the fourth one is a dropdown menu with 3 additional alternatives that are visible while hovering over the fourth button. I have also added an image to the web page, but the problem I am having is that, while hovering the fourth alternative and thus displaying the dropdown menu, the image moves.
I would like to make it so that the picture, and any additional content for that matter, stays at the same place while the cursor is hovering over the fourth alternative.
HTML:
<body>
<div id="logoquotebar">
</div>
<a class="navbutton1" href="#"> Navbutton 1 </a>
<a class="navbutton2" href="#"> Navbutton 2 </a>
<a class="navbutton3" href="#"> Navbutton 3 </a>
<a class="navbutton4" href="#"> Navbutton 4 </a>
<div class="dropdowncontent" href="#">
<a id="link1" href="#"> Link 1 </a>
<a id="link2" href="#"> Link 2 </a>
<a id="link3" href="#"> Link 3 </a>
</div>
<div id="logopic">
<img src="E7.jpg" width="148" height="120">
</div>
</body>
CSS:
#logoquotebar {
background-color:white;
width:1200px;
height:200px;
}
#logopic {
position:fixed;
margin-top:-160px;
}
.navbutton4 {
display:block;
width:236px;
height:35px;
background-color:#8B6969;
text-align:center;
line-height:33px;
font-family:Verdana;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
margin-left:964px;
margin-top:-35px;
}
.dropdowncontent {
display:none;
width:236px;
height:105px;
background-color:white;
text-align:center;
line-height:33px;
font-family:Verdana;
margin-left:964px;
-webkit-transition-duration:0.2s;
transition-duration:0.2s;
}
#link1 {
display:block;
width:236px;
height:35px;
}
#link2 {
display:block;
width:236px;
height:35px;
}
#link3 {
display:block;
width:236px;
height:35px;
}
.navbutton4:hover + .dropdowncontent {
display:block;
}
.dropdowncontent:hover {
display:block;
}
.dropdowncontent {
position: absolute;
z-index:100;
}
Try this
.dropdowncontent {
position: fixed;
}
That should work
I have tried lot but did not find any solution so that that can be helpful for me. I have a menu which look like as below. The Menu has multiple menu item and each item is an anchor that consists of image, text and arrow.
Problem:
Image height will fit according to anchor height and every element
of anchor must be middle.
Arrow would be down or right, every arrow will fit to right.
HTML CODE:
<a href="javascript:void(0);" class="" data-toggle="dropdown">
<span>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png" alt="" />ADMIN
<i class="fa fa-caret-down"></i>
</span>
</a>
CSS CODE:
a {
text-decoration: none;
width: 300px;
border: 1px solid red;
}
img {
width: 1.5em;//do not fix.
}
a:hover {
text-decoration: none;
}
plunker
Here is the working solution:
<a href="javascript:void(0);" class="" data-toggle="dropdown">
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png" alt="" /> ADMIN
<div>
<i class="fa fa-caret-down"></i>
</div>
</a>
And the CSS:
a {
text-decoration: none;
width: 300px;
border: 1px solid red;
display:inline-block;
line-height: 1.5em;
}
a div{
display:inline-block;
float:right;
}
img {
height: 1em;
vertical-align:middle;
}
The trick here is to use the line-height on anchor tag along with vertical-align:middle on the img.
Note that you cannot use // for commenting in CSS. Only /*... */ is supported.
Here is the demo.
I'm making a basic navigation bar that consists of inline links all containing text and some also containing images. When an image is within the link, it moves the link element background (it does not move the link text apparently). The background moves more if the image is set to a larger size. I want all the elements to be exactly lined up.
Here is an image of the problem
Here is the relevant HTML:
<!--navigation bar-->
<div id="nav">
<a class="navLinks" href="">Resume</a>
<a class="navLinks" href="mylinkedinprofileURL">
<img class="logo" id="logo_linkedin" src="images/logoLinkedin.png">LinkedIn</a>
<a class="navLinks" href="wordpress">
<img class="logo" id="logo_wordpress" src="images/logoWordpress.png">WordPress</a>
<a class="navLinks" href="travels">Travels</a>
</div>
And here is the relevant CSS:
#nav {
position: relative;
top: 10px;
text-align: center;
}
.navLinks {
border-radius: 3px;
text-decoration: none;
color:white;
text-align: center;
width:110px;
height:20px;
padding:15px;
background-color: #353841;
display:inline-block;
}
.logo {
height:20px;
position:relative;
right:10px;
}
I'm very new to web development, so if there is a much better or more elegant way to be doing this, please let me know!
Add vertical-align:top to the tabs.
.navLinks {
vertical-align:top;
}
See DEMO here.
<div class="gallery">
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
</div>
a{
float:left;
width:25%;
height:25%;
position:relative;
border:1px solid #333;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
a img{
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height;
-webkit-transition-duration:300ms;
-moz-transition-property:width, height;
-moz-transition-duration:300ms;
-o-transition-property:width, height;
-o-transition-duration:300ms;
position:absolute;
z-index:1;
opacity:0.3;
cursor:pointer;
}
This is a real beginner question but I'm not that good with CSS anymore.
I want to use my css above to work only on my gallery class but right now it's affecting all a href's on the page.
Any help would be greatly appreciated. Thank you.
Change:
a{
...
}
a img{
...
}
To:
.gallery a{
...
}
.gallery a img{
...
}
if you directly call a specific tag in css for e.g. a { ....} it will affect all the anchor tags within the document. Hence you have to call only specific anchor tag wihin the gallery section.
for e.g.
.gallery a { ....}
Then only the anchor tags within the gallery section will be affected
I have an a tag and inside the a tag is a span with a class called "arrow".
I have a hover style on the a tag which turns the text blue. I also want the arrow to turn blue when the a tag is hovered over.
<div id="results" class="center">
<div class='link'>
How to use SimplyBuilt support
<span class="arrow"></span>
</div>
</div>
I tried this but didn't work.
// This works
#results .link a:hover {
color: #0098ff;
}
//This does not
#results .link .arrow a:hover {
background-color: red;
}
Based on this:
<div id="results" class="center">
<div class='link'>
How to use SimplyBuilt support
<span class="arrow"></span> <!-- this span is NOT inside the a.href -->
</div>
</div>
You would need to target .link a:hover + .arrow
However, if the span is, in fact, inside the link the HTML would be
<div id="results" class="center">
<div class='link'>
<a href="#">How to use SimplyBuilt support
<span class="arrow"></span> <!-- this span IS inside the a.href -->
</a>
</div>
</div>
You would target .link a:hover .arrow
#results .link a:hover span{
/* your style */
}
Is this what you want?
Shouldn't the a:hover be before the .arrow?
To select something that is alongside the current item, use +
#results .link a:hover+.arrow
This should do it.
Maybe this does the trick:
#results .link a:hover .arrow {
background-color: red; }