I have problem with with adding the hover.css effects, which I get from here.
First, here is the sample HTML that I have created.
In the NAV BAR you will see two Personal button. One is with the hover effects and another one is without the hover effects but with the Mega Dropdown Menu.
Second, what I'm trying to do is to add the hover effects into the second Personal button.
<li class="droppable nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</a>
</li>
Every time I try to add hvr-sweep-to-bottom class into the <li>, the drop down menu will always gone.
Here's the HTML directory file in case you want to access to the .css/.js.
Hope someone can help me with this, with many many Thanks! :D
You need to do two things
Remove the padding from the .pos-menu element that is your <li>. This will ensure the <a> tag inside gets full width.
.pos-menu {
border: 1px solid #DF1E34;
border-radius: 50px;
margin-right: 10px;
overflow: hidden;
}
Update your HTML like below. The hvr-sweep-to-bottom should be on the <a>.
<li class="droppable nav-item pos-menu">
<a class="nav-link personal-hover hvr-sweep-to-bottom" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</li>
To maintain the hover effect if cursor remains inside the mega-menu
.pos-menu:hover .hvr-sweep-to-bottom {
background: rgba(0,0,0,.7);
}
Hope it helped.
Related
I have this specific tag around 8 or 10 times in my code I want to edit the colour of the word in between the colour white but the double class system is not working for me the tag already has a nave-link class and then I added the navi class to edit it,I do not know to solve this problem one approach is to style those a million times manually I am pasting the code of index.html and style.css
PS: I almost forgot to mention I am using bootstrap for my project so this is the code in between the nav ie navigation bar
this is the html code
<li class="nav-item">
<a class="nav-link navi" href="index.html">
Home
</a>
</li>
and this is the css code
.navi
{
color:#fdfefe;
}
When using multiple classes the later ones override the earlier ones.
.first {
color:red;
}
.second {
color:green;
}
<p class="first second">yo</p>
This will result in a green text
I'm having trouble getting the right selector.
Let me try to explain the best way I can:
I'm working on a project that I cannot change HTML and Javascript, it has some dynamic HTML and other reasons.
On the project, there is an image on a <img> tag.
However, I need to change colors between two layouts, and as you can see on the HTML/CSS the only way I got that to work is to hide th <img> tag and set a background to the anchor, that has a title.
So, now, when I change the layouts, the image changes, however there is also something else, this image on click hides the menu and changes the image one more time.
Now, I need to hide the background on the anchor when the title on the image changes.
Here is the HTML BEFORE clicking the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
</a>
</li>
</ul>
And here is the HTML AFTER I click on the image
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
</a>
</li>
</ul>
THE CSS
I HIDE THE ORIGINAL IMAGE, USED ON THE OTHER LAYOUT
#ul-icone-mh li a img {
visibility: hidden !important;
}
AND SET THE NEW IMAGE
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}
And when I click it, the image stays the same, but I need to hide that image when the title changes and add another image.
Any ideas what I can do?
You need a bit more than just the right CSS selector. The problem there is the old stumbling block that there is no parent selector.
A bit more thought and work is required.
img { height:50px; width:50px }
ul {padding: 0; list-style:none;}
.icones a::after {
content: '';
height:50px; width:100px;
background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%);
display:inline-block;
}
.icones a {
height:50px; width:50px;
display:block;
white-space:nowrap;
overflow:hidden;
font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
margin-left: -50px;
}
.icones a img[title='Exibir menu horizontal'] {
margin-left: -100px;
}
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
</a>
</li>
</ul>
</div>
<div id="div-mh-ico">
<ul id="ul-icone-mh" class="icones">
<li>
<a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
<img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
</a>
</li>
</ul>
</div>
Here I've increased the images to 50x50px from 16x16px to make them a bit easier to see but the principle is just the same.
For the two images referenced by the HTML, I've used two blocks that are different shades of red.
For the two CSS overlay images, for simplicity I've used a linear gradient making a block that's the height of the image and twice the width. The left half is green and the right half blue. You would use a sprite for the two images you want to display. The left half of the sprite would contain the "Esconder ..." replacement image and the right half of the sprite would contain the "Exibir ..." replacement image.
I've also shown both cases together rather than switching between them on click, again for simplicity.
The idea is that the left margin of the image is made negative to shift it out of the a element. The pseudo element that follows contains the sprite and is shifted into that space, either by the width of the image, or twice the width of the image to show different contents for the two cases.
Hence we get a green box for the "Esconder ..." case and a blue box for the "Exibir ..." case.
So if I understand correctly, then the title is "esconder", you want to hide the default image and inject your own. And otherwise you want to show the original (when the title is "exibir".)
You have correctly identified how you would target the a tag based on the title: a[title="Esconder menu horizontal"]. What you then need to do is only exclude the image when it is inside of this tag, and then replace it with your own image. You then also need to give it an explicit size, and declare the a tag which now directly has the background image with some size. Like so:
a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
display:inline-block;
}
You will notice I added a few lines to your existing styling:
display:inline-block tells the browser that this element should follow the flow like an inline element, but should have block-type semantics. By default, an anchor tag is an inline element, which means it doesn't have explicit size or width -- just what is enforced by its children. Since you've delcared that the child is not to be seen, the anchor tag effectively collapses to be of 0x0 size.
height:16px; width:16px tells the browser the size you want for this image. I guessed at these dimensions based on the background-size property you had set. Since we've told the browser using the display property that this element has explicit size, we now tell it what that size is.
It's not very clear what you're trying to accomplish, but if you're trying to change the anchor based on the image, this is simply not possible using CSS alone.
You can target child elements based on their parents, but you can not target parent elements based on their children in CSS (currently).
The only way to do this would be to affect how the HTML renders the two options, or using Javascript.
There are a few different suggested specs for such a selector, but none have yet been implemented.
Since the img tag is what has the dynamic title, that is the only thing you will be able to target with your CSS. If you cannot accomplish your task by targeting the img then it can't be done within the constraints you stated.
Selectors:
https://www.w3.org/TR/CSS2/selector.html
Support for the proposed spec for a parent selector:
https://caniuse.com/#feat=css-has
I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp
<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>
.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}
Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
Have come against an interesting problem and I'm stumped.
Basically on one of our pages we have a couple of hyperlinked areas. These areas are not only clickable where they have text but throughout the entire background by setting the link with display:block. You can see a simple example of such a clickable area here.
So recently the powers that be have asked me to add another link within this area. The inner link would have a different target to clickable area and will only be clickable for it's immediate text and the rest of the clickable area will wrap around it. You can see how this would fit together in this demo (the yellow bit represents the clickable portion of the inner link and the red represents the outer link).
NOTE: I realise this looks a very messy implementation but I'm afraid it's out of my hands.
By design (and for good reason) I cannot simply nest my <a> tags like so:
<a href="#" class="clickable_area">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<a class="inner_link" href="#">Yellow background and it's own link</a><br/>
</a>
Trying to nest the tags like this causes the outer link to be closed prematurely by the first instance of </a> as seen here.
One solution may be to make the inner link a span element and then use onclick events to perform the hyperlink via JavaScript but I'm not too found of this approach and would really prefer to avoid any JavaScript workarounds.
I've tried a couple of workarounds with CSS etc. but as yet I've come up dry. I've a feeling that absolute positioning or negative margining could be key but I've never been any good at either.
If anyone could offer up any suggestions I'd be very appreciative.
You can't nest links. My suggestion is to absolutely position the inner link over top of the outer area, somewhat like this:
<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
link 2
</div>
You can't nest links, but use absolute positioning.
<div id="wrapper">
<a id="bigred" href="...">Big clickable area</a>
<a id="yellow" href="...">Yellow background link</a>
</div>
CSS
#wrapper {
position: relative;
height: 300px;
width: 500px;
}
#bigred {
background: #ff0000;
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 500px;
}
#yellow {
background: #ffff00
position: absolute;
top: 30px;
left: 30px;
}
Both links will be clickable. Yellow is drawn on top of red because of source order. If you change the order you will need to use z-index to control which displays on top of which.
Here you go a working example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>
<div class="container">
<a href="#" class="clickable_area">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a class="inner_link" href="#">Yellow background and it's own link</a>
</div>
</body>
</html>
I'd use a div to wrap your links. Is this what you're going for? http://jsfiddle.net/wcCMC/3/