I am having trouble making a div change background colour when text is hovered.
I am using an absolute position for the div.book with an absolute value of text over it so the text hovers over the div, text on z-index 3 and div on 2.
When I hover the div the whole background changes, however the text is covering most the div and when its hovered nothing changes so I tried:
h1:hover + div.book {
background-color: rgba(333, 33, 33, 1);
}
.book {
height: 50px;
}
<h1>Book</h1>
<div class="book"></div>
But I can't seem to get it to work?
Any Ideas?
Thanks in advance!
Place the h1 inside the <div></div>. The 2 elements will now overlap eachother. Add width to .book. And finally set the color (=textcolor) transparent so no letters will be displayed.
h1:hover {
background: red;
color: rgba(0, 0, 0, 0);
}
.book {
height: 50px;
width: 200px;
}
<div class="book">
<h1>Book</h1>
</div>
h1:hover + div.book {
background-color: rgba(333, 33, 33, 1);
}
.book{ position: absolute; z-index: 2; background-color:rgba(333,33,33, 0.6);width: 230px; height: 60px; border-radius:40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px;-webkit-border-radius:40px 40px 40px 40px; border:1px solid #999;}
div.book:hover{background-color:rgba(333,33,33, 1);}
h1 {font-family: 'tahoma', cursive; color:#FFF;font-size:48px; text-shadow:3px 3px #000; position:absolute; z-index:3;}
<div class="welcome">
<center><h1>Book</h1></center>
<div class="book">
</div>
</div>
Related
I am trying to apply a CSS rule that fits the next scenarios independently on the layout inside the button.
scenario 1: text
scenario 2: text + icon
scenario 3: icon + text
This is the desired behavior:
For now, I am applying padding to the button, so it works for scenario 1 and then I tried to add a margin to the icon image. However, it is added to the padding and its side becomes bigger than the other.
You can see the issue in the following image.
Can this be achieved with the only CSS?
code
<button class="pzl-button pzl-button-base primary">BUTTON</button>
<button class="pzl-icon-button pzl-button-base primary">BUTTON<img class="pzl-icon-button" src="assets/icon/chevron.svg"></button>
<button class="pzl-icon-button pzl-button-base primary"><img class="pzl-icon-button" src="assets/icon/chevron.svg">BUTTON</button>
css
.pzl-button-base {
margin: 8px;
background: none;
text-decoration: none;
border: 1px solid transparent;
display: inline-block;
padding: 3.5px 16px;
font-family: "Rubik", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.pzl-button-base.primary{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
background: #E9B56F;
color: #FAFAFA;
}
.pzl-button-base.primary img {
filter: invert(99%) sepia(35%) saturate(0%) hue-rotate(173deg) brightness(113%) contrast(96%);
height: 1.5em;
}
.button-chevron-inverted {
transform: rotateZ(180deg);
}
.pzl-button-base img {
padding: 0 6px;
}
This is the CSS box model, which might help you to visualise the issue you are having:
Any margin you add to the icon image will come on the 'outside' of the padding property.
I am not 100% sure what you are asking, but if you are trying to add a margin between each of the 3 buttons, then you need to apply the margin property to the buttons, not to the icon images.
does this helps ?
.textbox {
position:relative;
display:inline-block;
width: 8rem;
height: 2rem;
border: 2px solid orange;
margin-left:1rem;
background:orange;
}
.text {
position:relative;
width:100%;
display:inline-block;
text-align:center;
color:white;
margin-top:7px;
}
.leftarrow {
position:relative;
display:inline-block;
float:right;
margin-right:1rem;
}
.rightarrow {
position:relative;
display:inline-block;
float:left;
margin-left:1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="textbox"><div class="text">BUTTON</div></div>
<div class="textbox"><div class="text"><i class="fas fa-arrow-right leftarrow"></i>BUTTON</div></div>
<div class="textbox"><div class="text"><i class="fas fa-arrow-left rightarrow"></i>BUTTON</div></div>
I need to higlight a div 5 pixels before its current position on mouse over. That is to say if the user passes the pointer over it the div would be highlighted 5 pixels before, but without changing its content position.
.container {
width: 100%;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
position: relative;
padding-left: 5px;
}
}
<div class='container'>
<a href='#'>Click me!</a>
</div>
On mouse over it highlights but the "Click me!" message moves 5 pixels to the right. How can I achieve this?
Try this SCSS
.container {
width: 100%;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
position: relative;
padding-left: 5px;
a{
margin-left:-5px;
}
}
}
Link for reference
hope this helps..
add margin-left:-5px; to your hover class
.container {
width: 100%;
}
.container:hover {
background-color: rgba(0, 0, 0, 0.1);
position: relative;
margin-left:-5px;
}
<div class='container'>
<a href='#'>Click me!</a>
</div>
I've had a go at this as it looked fun.
Moving the element 5px left whilst preserving the contents with padding (and adding 5px to the width to offset the shift)
You should have something that looks like this:
.container:hover {
position:relative;
width:calc(100% + 5px);
left:-5px;
box-sizing:border-box;
padding-left:5px;
}
Code pen here
Use the outline property. This is literally the use case it is meant for. It improves accessibility. For more info read http://www.outlinenone.com
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I have following CSS:
.bckgrnd_150 {
background: rgba(0, 0, 0, 0.5);
width: 150px;
height: 100px;
transition-duration: 2s;
}
.bckgrnd_150:hover {
background: rgba(255, 255, 255, 0.98);
}
.bckgrnd_150 .wp {
color: white;
}
.bckgrnd_150 .wp:hover {
color: black;
}
Since I'm a begginer in this class, I need help. I would like to use whole code (upper) and apply it to one or simplier: When I hover over .bckgrnd_150 class (styled box as background) it will apply for everything inside the div.
There's HTML:
<div class="bckgrnd_150">
<img alt="" src="http://files.tado-hamann.webnode.com/200001010-bd155be2cb/appbar.download.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 25px; height: 25px;">
<p class="wp">blahblah</p>
</div>
So as you can see (http://jsfiddle.net/5d4yyp9p/) hovering over a box works, but don't affect the .bckgrnd_150 .wp class (text).
I would like to help; when I hover over a box, it will also affect text :hover (because I now need to hover over text to affect him).
I'm really sorry, I'm NEW. :)
You could just use:
.bckgrnd_150:hover .wp {
color: black;
}
Instead of
.bckgrnd_150 .wp:hover {
color: black;
}
As by hovering the parent, it will apply on the child elements also.
jsFiddle here.
I wonder know how to change a DIV from another DIV in the CSS
I mean : I have 2 div, and when the mouse is over 1 div, I want change the CSS of the other DIV
Thanks you
HMTL :
<li id="aboutUs">
<a>
<div id="icon"></div><h1>ABOUT US</h1>
<p id="nav">
A bit about us, jackpots, good gaming & join the community
</p>
</a>
</li>
CSS :
#aboutUs{
float:left;
border-right: 1px solid rgb(231, 231, 231);
border-bottom: 3px solid rgb(231, 231, 231); /* gray color */
height: 78px;
padding-top: 20px;
margin-right: 10px;
margin-bottom:10px;
vertical-align: top;
min-height: 62px;
padding-left: 10px;
padding-right: 10px;
color:#808080; /* #808080; */
cursor: pointer;
}
#aboutUs:hover{
border-bottom: 3px solid rgb(86, 126, 1); /* green color */
}
li a{
color:#808080; /* Color 2 */
}
li a:hover{
color: #000000; /* Color 1 */
}
I WANT TO BLEND THE "ABOUT US" and the "li a" for some COLLSION DETECTION's REASON with the mouse. I want that when the mouse is hover the "about us, the "li a hover's css execute"
If the two elements are siblings you can use the adjacent sibling combinator, e.g.
<div></div>
<div></div>
div {
background: slategray;
height: 5em;
width: 5em;
}
div + div {
background: lightgray;
}
div:hover + div {
background: peru;
border-radius: 10px 50px / 20px;
}
http://jsfiddle.net/b5fgT/1/
Or if the elements are siblings but not immediate siblings, you can use the general sibling combinator:
http://jsfiddle.net/b5fgT/3/
You can also style a descendant element when mousing over its parent:
div:hover > div {
/* CSS */
}
Edit as per your comment: "But I want change the color of the <p> only.. Can you do it for me?"
Well in that case you can use: #aboutUs:hover p {color: red;} - http://jsfiddle.net/mpa5k/1
Well, that is a bit tricky. Css does not currently travel UP the Dom, only DOWN the Dom. If you are traveling down, you can simply use the + for adjacent siblings, or ~ for general siblings selector.
Or, you could give them the same class name and use the :not:hover pseudo class. Check out this fiddle here:
http://jsfiddle.net/LGQMJ/
div:not(:hover) span.question {
opacity: 0;
}
div:hover span.question {
opacity: 1;
}
If I could see your HTML structure I could help you more.