I am trying to set something up where when someone hovers over .twitter-underline-1 it triggers the :hover for that class AND the :hover for the #twitter-1 id
vice verse
When someone hovers over #twitter-1 it triggers the :hover for that id AND the :hover for the .twitter-underline-1 class
I tried some recommended solutions from other who asked a similar question but nothing fully worked. Can anyone point me in the right direction?
.twitter-underline-1 {
border-bottom: 1px dotted #E0E0E0;
}
.twitter-underline-1:hover {
border-bottom: 1px solid #4099FF;
}
#twitter-1 {
padding-top: 402px;
font-size: 40px;
color: #E0E0E0;
margin-left: 45px;
}
#twitter-1:hover {
color: #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span class="twitter-underline-1">Blah blah text</span>
<div class="twitter">
<span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
</div>
demo - http://jsfiddle.net/3855n719/
$('#twitter-1').hover(
function() {
$('.twitter-underline-1').addClass('hover');
},
function() {
$('.twitter-underline-1').removeClass('hover');
}
);
It can't be done without changing your html structure as it is impossible to select a previous element in css.
I think you have two options:
Surround it with a .twitter-container and add the :hover class there. This might only be an option if you don't have any other content between the .twitter-underline and #twitter-1 as hovering over them would also add the styling.
Move the .twitter-underline element in the html below the #twitter-1, select it with a
sibling selector like + or ~ and use position: absolute to put it back in its proper place.
Example for method 1
.twitter-underline-1 {
border-bottom: 1px dotted #E0E0E0;
}
#twitter-1 {
padding-top: 402px;
font-size: 40px;
color: #E0E0E0;
margin-left: 45px;
}
.twitter-container:hover .twitter-underline-1 {
border-bottom: 1px solid #4099FF;
}
.twitter-container:hover #twitter-1 {
color: #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="twitter-container">
<span class="twitter-underline-1">Blah blah text</span>
<div class="twitter">
<span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
</div>
</div>
Example for method 2
.twitter-container {
position: relative;
padding-top: 1em;
}
.twitter-underline-1 {
position: absolute;
top: 0;
left: 0;
border-bottom: 1px dotted #E0E0E0;
}
#twitter-1 {
padding-top: 402px;
font-size: 40px;
color: #E0E0E0;
margin-left: 45px;
}
#twitter-1:hover {
color: #4099FF;
}
#twitter-1:hover + .twitter-underline-1 {
border-bottom: 1px solid #4099FF;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="twitter-container">
<div class="twitter">
<span title="Click to Tweet">
<i id="twitter-1" class="fa fa-twitter"></i>
<span class="twitter-underline-1">Blah blah text</span>
</span>
</div>
</div>
Related
What should I do when I have 2 a:hover values right above each other, but only the first value is working and the second one not working?
<div>
Home
</div>
<div>
Features
</div>
<div>
Pricing
</div>
<div>
Contact
</div>
<div>
<a class="button-go-premium" href="#">Go Premium</a>
</div>
.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar a:hover {
color: var(--primary-color);
}
.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
I have tried to delete the first value (--primary color), only then the second value (white) is working, but I need to have both values working at the same time. If possible, I do not want to change the order of divs or any of the syntax.
As easy and not best practice solution you can use
color: white !important
But it's better to add classes for the regular links and for specific links.
.button-go-premium {
border: 3px solid red;
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar .link:hover {
color: red;
}
.link.button-go-premium:hover {
background-color: red;
color: white;
}
<div class="navbar">
<div>
<a class="link" href="#">Home</a>
</div>
<div>
<a class="link" href="#">Features</a>
</div>
<div>
<a class="link" href="#">Pricing</a>
</div>
<div>
<a class="link" href="#">Contact</a>
</div>
<div>
<a class="link button-go-premium" href="#">Go Premium</a>
</div>
</div>
Since you don't want to change your HTML syntax, you can target the element with more specificity.
Instead of
.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
Target it with
.navbar a.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
See the difference? you were previously using this against yourself. You could use more classes like the other answer mentioned, but that can get bulky. You could not touch your HTML and change your CSS to
.navbar a:hover {
color: var(--primary-color);
}
.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar a.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
SCSS Version
.navbar {
// navbar styles
a {
// styles for links
&:hover {
color: var(--primary-color);
}
}
a.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
&:hover {
background-color: var(--primary-color);
color: white;
}
}
}
Anyone reading this should look into the following concepts in CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Try to use
color: white !important;
I was trying to make a button that has the shape of an icon but the button overflows the icon
.upvote, .downvote {
font-size: 55px;
}
.up {
color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="upvote up"><i class="fa fa-caret-up"></i></button>
<a class="upvote up"><i class="fa fa-caret-up"></i></a>
It works fine for a tag but I want to use it in a submit form so I can't use a tag.
Why don't use directly the icon as button like:
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-caret-up fa-5x upvote up"></i>
i add fa-5x for the size and cursor: pointer; for cursor in hover state.
Into a form:
const myform = document.getElementById('myform');
document.querySelector('.up').addEventListener('click', () => {
myform.submit();
});
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form id='myform'>
<i class="fa fa-caret-up fa-5x upvote up"></i>
</form>
Else you can use SVG sprites Link official, i can't post an example for Same origin policy
Instead of using an icon inside the button, you can follow this method. Here I have modified the button matching the styles of the icon. This way you can keep the properties of a button, while having a different design.
Otherwise, you can add a clickEventListener to the icon itself as Simone's answer
.arrow-up {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<button class='arrow-up'></button>
Please find the same for arrow-down
.arrow-down {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid green;
}
<button class='arrow-down'></button>
This way you can completely avoid the usage of fa icons if this is your only requirement.
Check the margin and padding of the icon as well as the button and also define height and width by yourself.
.upvote, .downvote {
margin: 0px;
padding:0px;
font-size: 55px;
}
.up {
margin: 0px;
padding:0px;
height:..;
color: green;
}
The following code with its output is also available in: https://jsfiddle.net/rupali317/rj4ashxq/
Goal: In the following code I am trying to create a workflow bar, showing step 1 , step 2 and so on.
Expected results: These steps are highlighted as green circular buttons and there should be blue arrows in between the circular green buttons.
Actual result: As depicted in my fiddle, the arrow lines appear first, followed by the three circular buttons and finally the two arrow heads.
Question: I have clearly specified the order of the html elements (which should give me my expected results). Question is, why the ordering is happening differently?
<html>
<head>
<style type="text/css">
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width: 120px;
}
.line {
margin-top: 25px;
width: 110px;
background: blue;
height: 1px;
float: left;
}
.head {
margin-top: 15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float: right;
}
</style>
</head>
<body>
<div>
<button class="green-button">1</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">2</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">3</button>
</div>
</body>
</html>
The float line in your css is going to force the line to appear to the left of the circles.
Try this:
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width:120px;
}
.line {
margin-top:25px;
width:100px;
padding:0 50px;
height:1px;
border-style:solid;
border-width:1px;
border-color:blue;
background:blue;
}
.head {
margin-top:15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Give your .arrow display inline block. This will order your arrows as the expected result indicates
.arrow {
width:120px;
display: inline-block;
}
Hope this helps :)
.green-button {
color: white;
background-color: #27AE60;
border-radius: 50%;
height: 50px;
width: 50px;
border-style: solid;
border-width: 0px;
cursor: auto;
}
.arrow {
width:120px;
display: inline-block;
}
.line {
margin-top:25px;
width:110px;
background:blue;
height:1px;
float:left;
}
.head {
margin-top:15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float:right;
}
<html>
<head>
</head>
<body>
<div>
<button class="green-button">1</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">2</button>
<span class="arrow">
<span class="line"></span>
<span class="head"></span>
</span>
<button class="green-button">3</button>
</div>
</body>
</html>
I have this image:
and I tried to do the same in HTML and CSS, with two font awesome icons. I put the position:absolute for one of the icon to be close to the other. I tried to make the circle around but without any success. Someone please give me a hand.
.formular {
position: relative;
}
.formular a {
text-decoration: none;
}
.circle .fa-caret-right {
font-size: 17px;
color: #000;
}
.circle {
position: relative;
border: 1px solid #CCCCCC;
border-radius: 50%;
background-color: #dce0e1;
padding: 5px;
}
.circle .fa-caret-right:first-child {
position: absolute;
left: 4px;
}
.circle .fa-caret-right:last-child {
position: relative;
}
.formular .text {
font: normal 15px 'CenturyGothic-Bold';
color: #028A92;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="formular">
<a href="#" title="Click here">
<span class="circle">
<i class="fa fa-caret-right" aria-hidden="true"></i>
<i class="fa fa-caret-right" aria-hidden="true"></i>
</span>
<span class="text">Ask for our forms</span>
</a>
</div>
</body>
</html>
i have change this
.formular .circle {
background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}
<span class="circle">
<i class="fa fa-forward" aria-hidden="true"></i>
<!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
</span>
.formular {
position: relative;
}
.formular a {
text-decoration: none;
}
.circle .fa-caret-right {
font-size: 17px;
color: #000;
}
.formular .circle {
background: #efeded none repeat scroll 0 0;
border: 1px solid #cbcbcb;
border-radius: 50%;
color: #000;
display: inline-block;
padding: 3px 3px 3px 7px;
position: relative;
text-align: center;
}
}
.circle .fa-caret-right:first-child {
position: absolute;
left: 4px;
}
.circle .fa-caret-right:last-child {
position: relative;
}
.formular .text {
font: normal 15px 'CenturyGothic-Bold';
color: #028A92;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="formular">
<a href="#" title="Click here">
<span class="circle">
<i class="fa fa-forward" aria-hidden="true"></i>
<!--<i class="fa fa-caret-right" aria-hidden="true"></i>-->
</span>
<span class="text">Ask for our forms</span>
</a>
</div>
</body>
</html>
You probably need a bit more padding on .circle class,
eg:
.circle { padding: 10px }
This is not the best way to create this button, but as you just wanted a hand, hope that helps. :)
You will have to play around adjusting the shape of the circle a bit more to make it perfect.
Small Change In Css.
check the link below may Help You
.circle .fa-caret-right:first-child {
position: absolute;
left: 6px;
}
.circle .fa-caret-right:last-child {
position: relative;
left: 5px;
}
visit the link: https://jsfiddle.net/crxsL3qt/
I want to make a vertical menu with submenu's and the submenu have to go next to the parent div.
Hope you guys know how to do that, I did a look on google but only found results like 2 divs next to eachother. But I need that the child div have to get next of it.
My code for now:
HTML
<div id="menuCont">
<div class="menuItem">
Applicatie Ontwikkeling
<div class="subMenuCont">
<div class="subMenuItem">HTML</div>
<div class="subMenuItem">CSS</div>
<div class="subMenuItem">jQuery</div>
</div>
</div>
<div class="menuItem">
Netwerk Beheer
</div>
<div class="menuItem">
Server Beheer
</div>
</div>
CSS
#menuCont {
width: 17.5%;
text-align: center;
}
.menuItem {
width: 100%;
padding: 1em;
background-color: #ffffff;
color: #000000;
font-family: Lato;
font-size: 125%;
border: 1px solid #7266ff;
border-bottom: 0;
cursor: pointer;
}
.menuItem:first-child {
border-top-left-radius: 1.5em;
}
.menuItem:last-child {
border-bottom: 1px solid #7266ff;
border-bottom-right-radius: 1.5em;
}
.menuItem:hover {
background-color: #7266ff;
color: white;
}
.subMenuCont {
/*display: none;*/
position: relative;
/*left: 100%;*/
/*width: 90%;*/
}
.subMenuItem {
border: 1px solid #7266ff;
border-bottom: 0;
}
.subMenuItem:last-child {
border-bottom: 1px solid #7266ff;
}
Do you need any more info, please say it. for now I don't know what to give as more info.
In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want:
.subMenuCont {
position: absolute;
top:0;
left: 17.5%;
width: 17.5%;
}