I'm trying to have hover effects on two divs using less
<div class="uniforms">
Image goes Here
<div class="textWrap">
<div class="text">
<div class="name">
Product Name Here
</div>
<div class="price">
Price Here
</div>
</div>
</div>
</div>
on hover over .uniforms I want to change the background color of .uniforms and the font color of .name I have tried combinations of & ~ + ect but can not get the result I want
.uniforms{
background-color: grey;
padding: 10px;
&:hover{
background-color: red;
~ .name{
color: white;
}
}
}
I can do it with CSS but can't get it working with less. Any help would be appreciated.
thanks
Just remove ~
.uniforms{
background-color: grey;
padding: 10px;
&:hover{
background-color: red;
.name{
color: white;
}
}
}
Needed to be
.uniforms{
background-color: grey;
padding: 10px;
&:hover{
background-color: red;
.textWrap .name{
color: white;
}
}
}
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 write the same padding for 2 different div elements and it only applies to 1 of them.
I already tried applying the style to different elements, using margin, creating more divs, using width and probably more things, but can't find the solution. Also, is this a correct way of doing it? Should I use buttons instead?
HTML
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
CSS
.login {
text-align: center;
margin-right:2px 20px;
}
.button1 {
display: inline-block;
padding:2px 10px;
}
.button2 {
display: inline-block;
padding:2px 10px;
}
.button1, .button2 a {
background-color: #b0f4e6;
}
both div tags have same padding, and I've just found something wrong in your code.
in your CSS code,
/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
background-color: #b0f4e6;
}
so, this codes would be like it
.button1, .button2{
background-color: #b0f4e6;
}
/* OR */
.button1 a, .button2 a{
background-color: #b0f4e6;
}
.login {
text-align: center;
margin-right: 2px 20px;
}
.button1 {
display: inline-block;
padding: 2px 10px;
}
.button2 {
display: inline-block;
padding: 2px 10px;
}
.button1,
.button2 {
background-color: #b0f4e6;
}
<div class="login">
<div class="button1">
<p class="pButton">Login to see list</p>
</div>
<div class="button2">
<p class="pButton">Login to view profile</p>
</div>
</div>
you can try [attribute^=value] selector. in this case , will use [class^="button"]
better u write ur code like this:
HTML
<div class="button1"><p class="pButton">Login to view List</p></div>
</div>
<div class="login">
<div class="button2"><p class="pButton">Login to see Profile</p></div>
CSS
.button1 , .button2 {
background-color: #b0f4e6;
}
.login {
text-align: center;
}
.button1 ,.button2{
display: inline-block;
}
.button1 a, .button2 a {
background-color: #b0f4e6;
padding:20px 10px;
color:black;
}
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
can u try this ?
that's all...
I'm going through freecode camp to learn coding and am working on my personal portfolio page here (https://codepen.io/DerekDenHartigh/pen/ypgvKV) I've got buttons at the top and I'm having a really hard time modifying the text - I had to use HTML h2 element to get the right size font because none of my CSS would apply to it. Now I'd like to vertically center the text but am not sure how. Thanks!
body{
background-color: lightgrey
}
#Banner{
height: 70px;
text-align: center;
border: 5px solid black;
border-radius: 10px;
}
button{
height: 60px;
background-color: grey;
font-size: 20px;
}
button:hover {
background-color: #D2B48C;
color: white;
}
#bAboutMe{
width:calc(100%/3);
background-color: grey;
}
#bProgrammingProficiencies{
width:calc(100%/3);
background-color: grey;
border-left: 5px solid black;
border-right: 5px solid black;
}
#bContcactInfo{
width:calc(100%/3);
background-color: grey;
}
<div class="row" id="Banner">
<div class=column id="bAboutMe">
<button class="btn btn-block"><h2>About Me</h2></button>
</div>
<div class=column id="bProgrammingProficiencies">
<button class="btn btn-block"><h2>Programming Proficiencies</h2></button>
</div>
<div class=column id="bContcactInfo">
<button class="btn btn-block"><h2>Contact Information</h2></button>
</div>
</div>
Your <h2> are applied css bootstrap with margin-top:20px; margin-bottom:10px. U just need to set these two to 0
h2 {
margin:0;
}
or
h2{
margin-top:0;
margin-bottom:0;
}
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
I am trying to get my text within my border that I added as an image. I will be adding more text and would like it to show up in my border as I am writing it. Any help would be appreciated. Thanks!
li {
list-style-type: none;
display: inline-block;
font-size: 20px;
letter-spacing: 4px;
width: 150px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
border-bottom: 2px solid black;
border-top: 2px solid black;
}
a:link {
color: #008B00;
}
a:visited {
color: #008B00;
}
p {
font-size: 20px;
}
#main-border {
text-align: center;
}
.searchbutton {
font-size: 20px;
}
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
<img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>
I could not understand your question but i think this is what you are looking for :
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
#main-border {
text-align: center;
background : url(../desktop/background.gif);
background-size : 100% 100%;
min-height : 500px;
min-width : 500px;
}
like this? obviously style to your liking
var place=document.getElementById('txtplace');
function add_text(txt){
place.innerHTML=txt;
}
#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}
<input type="text" id="text_to_add" onkeyup="add_text(this.value);"/>
<span id="txtplace"></span>
<img src="http://lorempixel.com/600/600" id="background">
I believe this is what you're looking to achieve (although, instead of a picture of a kitten, your image)
.THIS {
background-image: url(http://placekitten.com/g/500/500);
background-repeat: no-repeat;
height:500px;
width:500px;
}
<div id="main-border">
<p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
Late answer but if you are trying to add text in the border you can absolute position it and do it like this http://jsfiddle.net/vo7jzz4m/
div{
width:250px;
height:250px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;
border:10px solid transparent;
outline:1px solid green;
}
div:before{
top:0px;
position:absolute;
content:"aA";
}