I have three divs in a tag.
<nav>
<div id="home">
<p>Home</p>
</div>
<div id="about">
<p>About Me</p>
</div>
<div id="contact">
<p>Contact</p>
</div>
</nav>
I want to make 3 buttons which changes its opacity to 1 when hovered, but i end up unsuccessful. Firstly, I declared nav's opacity as 0.3, and then set it's opacity to 1 when hovered. But it stays as 0.3 when hovered. I thought :hover pseudo-selectors are more specisic, so they would overwrite the old value, but they didnt. Here is the CSS code:
#home, #about, #contact {
text-align: center;
color: #eedd33;
display: inherit;
padding-top: 0px;
font-family: Tahoma;
border-right: solid 1px black;
height: 50px;
vertical-align: middle;
padding: 10px;
}
#home:hover, #about:hover, #contact:hover {
opacity: 1;
}
nav {
border: solid 2px black;
display: inline-block;
background: orange;
border-radius: 7px;
opacity: 0.3;
}
I can post images indicating my problem if you want it.
The nav's opacity is inherited by the children. Even if their's is 1 they will only show 0.3 opacity. Define the opacity of the children to be 0.3 instead.
Just create a generic class for each of the inner divs or change the CSS selector to something like this:
nav > #home:hover,
nav > #about:hover,
nav > #contact:hover {
opacity: 1;
}
Heres the JSFiddle http://jsfiddle.net/rZgzL/
Related
I have this scss class:
.dropdown-list {
display: block;
position: absolute;
background-color: white;
background-size: 100%;
list-style: none;
border: 1px solid var(--color-grey-light-2);
border-radius: 5px;
overflow: hidden;
li {
padding: 1rem;
&:not(:last-child) {
border-bottom: 1px solid var(--color-grey-light-2);
}
&:hover {
background-color: var(--color-grey-light-2);
}
}
a {
text-decoration: none;
color: currentColor;
}
}
However, the background color is not covering the entire div:
As you can see, there is a little border on the top and on the left of my div.
For completeness, i'm adding the html:
<ul class="dropdown-list" style="margin-top: 0.6rem; cursor: pointer">
<li>
Add Ingrediets to Shopping List
</li>
[...]
The "dropdown-list" class is linked on the "ul" tag and not on the "div" tag. You must add some css for the "div" tag or move the class "dropdown-list" depending on your need.
If it is not fixing your issue you should share the part with the "div" tag.
Give a background color in inline css
<div style="background-color: red;"></div>
this would work
What I want is to hover over my div and give it a box-shadow to show that it is clickable, I have some content and a button inside it which should not have the box shadow. The button enlarges on hover. I managed to get the box-shadow on the div and remove the box-shadow on content by using pointer-events:none but am unable to remove the shadow from the button as it is clickable and cannot use pointer-events:none. Is there any css only solution and if not, any other solution? jsfiddle link->https://jsfiddle.net/uzq13s47/1/
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<link rel="stylesheet" href="./src/styles.css"/>
<body>
<div id="container">
<div id="box">
<p>content</p>
<h5><button>click me!</button></h5>
</div>
</div>
</body>
</html>
body {
font-family: sans-serif;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
p {
pointer-events: none;
}
#container :hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
h5 :hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
You are not using :hover as you want to, that white space between selector and pseudo class (#container :hover) it means all child element will have the hover effect, in code means (#content *:hover), and that's why you have the p and the button with the hover effect.
You can remove that white space and apply the hover in #box and button only
Also I would advise not using the heading h5 as parent of the button because it isn't much correct in terms of semantics
body {
font-family: sans-serif;
}
.button {
width: 60px;
height: 60px;
}
#box {
background-color: cyan;
border-radius: 10px;
height: 200px;
width: 200px;
}
#box:hover {
box-shadow: 0 1px 5px rgb(137, 137, 138);
}
button:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
<div id="container">
<div id="box">
<p>content</p>
<button class="button">click me!</button>
</div>
</div>
I'm making a website and I'm trying to make the button center aligned, border-less, however, the css codes doesn't seem to effect the website
I have tried changing the class name, changing around the code and such. On the browser (google chrome) it shows that the code is "recognized" on the style but isn't being read
.qwerty {
background:#f4511e;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
<div class="column" class="Border">
<form action="aboutme.html">
<button class="qwerty">ABOUT ME</button>
</form>
</div>
The button should have no border, orange, and increases opacity on hover
You treat button as a class (in the CSS part where you have a dot before "button"). You can either write either of these two:
// First solution
.qwerty:hover {opacity: 1}
//Second solution
button:hover {opacity: 1}
Here I'm trying to give you a brief about the CSS properties were working properly. You have to just manage the class name.
.column{
text-align: center;
}
.column .qwerty {
background:crimson;
border: 2px solid #000;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.column .qwerty:hover {opacity: 1}
<div class="column Border">
<form action="aboutme.html">
<button class="qwerty">ABOUT ME</button>
</form>
</div>
.column {
width: 100%;
text-align: center;
}
use this. parent div must have a specific width to make child div it's center.
I'm trying to make the above text (home help customer etc) similar to the one below Home and all in green box with white text and hover effect but I am unable to add the green background and make the words display similar to the once below with a hover effect I have tried some things out but it did not help me out and also I have tried a lot to move the cart to the top right to make it look like a normal shopping website but it didn't work if you guys see any mistakes or suggestions to make it better I would really appreciate it as I am a beginner https://imgur.com/2Bhxzs2
Help fix the top header please refer the image link as it shows were exactly is the green box and all thank youthe image has the header of the website were there are different buttons like guest customer help etc and I am trying to make it like the one underneath in the green box with a hover effect
<html>
<head>
<title>Rajeshri Traders </title>
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="subheader">
<div class="container">
<p> CCTV Supplier</p>
Guest Consumer Download App
Help
</div>
</div>
<!--==main header==-->
<div id="main-header">
<!--logo-->
<div id="logo">
<span id="ist"></span><span id="iist"> Rajshri Traders</span>
</div>
<!--==search area==-->
<div id="search">
<form action="">
</form>
<input class="search-area" type="text" placeholder="Search here">
<input class="search-btn" type="submit" value="SEARCH">
<!--="user-menu"==-->
<div id="user menu">
</div>
<li>Cart
<li>Login
</div>
</div>
</div>
<!----=====navigation bar==--->
<div id="navigation">
<nav>
Home
New Arrivals
Products
Deals
Accesories
Order
</nav>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#wrapper {
font-family: tahoma;
}
/*logo styling*/
#main-header {
width: 100%;
height: 125px;
background: #93A7FF;
display: flex;
flex-wrap: no-wrap;
}
#main-header > div {
flex: 1 1 0;
}
#ist {
color: black;
font-size: 65px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
#iist {
color: black;
font-size: 45px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
/*searchinga area styling*/
#search {
padding: 20px;
margin-left: 50px;
text-align: center;
}
.search-area {
width: 350px;
height: 30px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
width: 65px;
height: 34px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
margin-left: 15px;
}
/*this is for user menu styling*/
#user-menu {
margin-top: 20px;
margin-right: 20px;
text-align: right;
}
#unser-menu ul {
list-style-type: none;
width: 100%;
}
#user-menu li {
display: inline-block;
padding: 0px 10px;
}
#main-header > div {
flex: 1 1 0;
}
/*this style is for navigation bar */
#navigation{
width: 100%;
height: 35px;
background: #1aaa1a;
float: left;
box-shadow: 10px 14px 45px 3px #1aaa1a;
}
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
To give a background colour to your 'home, help, customer etc' text, you need to refer to the element in which they are all included. In this case, they are all contained within the .container class. So by adding styling to the .container class, you'll be adding styling to the div containing the text in question.
Simply add a background colour to the .container class like this:
.container {
background: #1aaa1a;
}
As for the hover effect, you can specify the effect you want for each link of the 'home, help, container etc'. For example, if you want to change the colour of the text when you hover on it, you can do something like this
.container a:hover {
color: black;
}
The .container a is how you reference the links contained in your .container class.
Alright.So you need to see what styling you have applied to the text in the green box. you need to copy the styling you use in #navigation which is the container for everything in the green box. You have included your links in the green box in a nav element, you have then styled the nav element as follows:
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
You need to style your links in the .container div in the same way. The easiest way to do this would be to include your home, help, customer links in a nav element as follows:
<div class="container">
<p> CCTV Supplier</p>
<nav>
Guest Consumer
Download App
Help
</nav>
</div>
I need a little bit of help.
I am using the following html and css in CodePen. Basically I need it to start in a folded state rather than open.
I need the folder cover (top div) to always be unfolded as this will show information on how to open the content as the cover needs to contain a fold/unfold link. Also when I enter content in to each of the fold divs the content runs over to the next div, rather than expanding the current div as you will see in my edited CodePen below.
This would also need to be resolved so that it does not cause an issue when it is folded as the divs become misaligned.
Original CodePen
http://codepen.io/boxabrain/pen/Hhugb/
My edited CodePen
http://codepen.io/anon/pen/gmAnK
HTML
<div id="folder">
<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle- label">fold/unfold</label>
<div class="fold">
Element 1
</div>
<div class="fold">
Element 2
</div>
<div class="fold">
Element 3
</div>
<div class="fold">
Element 4
</div>
<div class="fold">
Element 5
</div>
<div class="fold">
Element 6
</div>
<div class="fold">
Element 7
</div>
<div class="fold">
Element 8
</div>
</div>
CSS
body {
padding: 50px;
font-family: Arial, sans-serif;
}
#folder {
width: 300px;
padding: 10px;
}
.fold {
background: #000;
background: #000;
padding: 10px;
width: 280px;
height: 80px;
color: #999;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#toggle { display: none; }
#toggle-label {
display: inline-block;
cursor: pointer;
margin-bottom: 50px;
border: 1px solid #e5e5e5;
font-size: 11px;
color: #999;
background: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 5px;
}
#toggle:checked ~ .fold:nth-child(odd) {
margin-top: -82px;
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}
#toggle:checked ~ .fold:nth-child(even) {
margin-top: -84px;
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}
Can anyone help me?
Thanks in advance
To start out in a folded state, just add :not selector like this:
#toggle:not(:checked) ~ .fold:nth-child(odd)
#toggle:not(:checked) ~ .fold:nth-child(even)
About content overflow - you need to adjust it by hands if you don't want to use Js (play with individual .folds heights and rotateX).