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.
Related
I'm making a portfolio page with html/css at the basic level
I made a button with an animation effect using pseudo-class: active.
Below is my html, css code.
div,
input,
textarea {
box-sizing: border-box;
}
body {
margin: 0;
}
html {
line-height: 1.15;
}
* {
margin: 0;
padding: 0;
}
.main-bg {
background: rgb(2, 0, 36);
background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(172, 224, 255, 1) 0%, rgba(106, 166, 241, 1) 0%, rgba(73, 73, 182, 1) 100%);
width: 100%;
height: 1000px;
}
.main-introduction {
color: white;
width: 40%;
padding: 10px;
position: relative;
left: 100px;
top: 100px;
}
.main-introduction>h1,
p {
margin-bottom: 10px;
}
.showBtn {
/* margin-top: 10px; */
width: 110px;
padding: 15px;
border-radius: 15px;
background: rgb(98, 98, 98);
color: white;
border: none;
box-shadow: 3px 3px 3px black;
transition-duration: 0.3s;
cursor: pointer;
}
.showBtn:active {
margin-left: 5px;
margin-top: 5px;
box-shadow: none;
}
.phone {
width: 30%;
position: relative;
left: 1000px;
top: 2px;
}
.white-banner {
background: white;
text-align: center;
padding: 20px;
height: 200px;
}
.white-banner>h4,
p {
margin-bottom: 20px;
}
```
<body>
<div class="main-bg">
<div class="main-introduction">
<h1>Frontend Student Developer, <span style="font-size: larger; color: rgb(165, 255, 252);">Dan</span></h1>
<br>
<p>Always considering improvements, growing, code.</p>
<p>Recently fell in love with developing.</p>
<button class="showBtn">Show More</button>
</div>
<div>
<img src="img/phone.png" alt="phone" class="phone">
</div>
<div class="white-banner">
<h4>god tell us the reason youth is wasted on the young</h4>
<p>Lorem ipsum dolor sit amet consectetur elit.</p>
<button class="showBtn" style="width: 150px;">Show Portfolio</button>
</div>
</div>
</body>
When I cliked a button, as you saw, animation effect is happen by giving margin when I clicked(:active) btn.
But Phone image and white-banner also got animation effect!!
I thought about margin collapse. However, it was judged that it was not because the upper and lower borders were not overlapped.
Also I tried giving some additional margin. (Annotated code on .showBtn) But..
It didn't work, but rather the shadow effect turned strange. I also want to know why shadow effect turned strangely.
I don't know why this happened..
Problem : your 'html structure objects' interact with each others.
You can solve it too much ways with using css.
But you have to know this : 'The right way is only a few.'
This way is better for you : 'Learn more about CSS.'
For example :
Option 1 : Seperate your main objects divs and give they are some height and width.
Place they are right and left side.
// But you will have to give they are responsive behaviors.
// You will need some css experience.
Option 2 : Make your hero image 'absolute' not 'block'.
// And you will need for place it 'very well' some css knowledge like flex.
// learn 'flex'.
Option 3 : You can use your image like a background-image for your div.
// and make it contain, re-size and place it with some responsive behaviors.
// it will be never interaction with other html elements.
Option 4 : Use grids for seperate your html objects for not-interact with each others.
// learn grids.
// =============== best way. =============== //
if you don't want to save only today...
Examine other's similar html/css code examples.
Find similars but responsive ones.
// =============== best way. =============== //
I'm creating a newsletter in Salesforce Pardot and I want the CTA buttons to change color when you hover over them.
I have 2 different CTA buttons.
For the transparent CTA buttons I'm using this CSS and that's working:
.tr1:hover { background: #F7F36D !important; }
.tr1:hover td { background: transparent; }
.tr2:hover { background: #6BCDDD !important; }
.tr2:hover td { background: transparent; }
Etcetera
But I also have a black CTA button where I want to change the bg color (to #E0A9D5) as well as the font color (to #000000). But somehow I can't seem to get it working :(
This is the HTML code:
<tr class="tr6">
<td align="center" class="em_white" height="36" style="height: 36px; background: rgb(0, 0, 0); padding: 0px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: rgb(0, 0, 0); border-style:solid; border-radius: 0px; border-width: 2px; border-color: black;" valign="middle">Lorem ipsum dolor ยป</td>
</tr>
Can anyone help me with the CSS part? Thanks!
In order to use the hover property, you can simply use :hover on any selector. Here is a quick example.
button:hover {
background:yellow;
transform:scale(200%);
}
<button>A button</button>
Now if you want to make another element change when you hover on one element, you can use a code like this:
div:hover ~ span {
background:red;
}
<div id="element1">a div here</div>
<span>span</span>
It's not great practice to have lots of inline style added to your html elements. Therefore, you should strip out the content s of the style="...".
Then instead, choose an appropriate selector, eg the class="em_white" and add style there instead:
.em_white {... Add stripped out style here...}
After that, you can then target the anchor within the tr tag, with something like:
.em_white a {background-color:#f00; color:#000}
.em_white a:hover {background-color:#000; color:#fff}
The added benefit to this is that there is a lot less duplication and also your code will become easier to read. You also only need to make one change to the CSS to effect all elements with that class.
I fixed it by styling both tr6 as em_white. I know this is not the right way to do it, but at least it's working.
.tr6 td { background: #000000; }
.tr6:hover td { background: #E0A9D5; }
.em_white1 a { text-decoration: none; color: #E0A9D5; }
.em_white1:hover a { text-decoration: none; color: #000000; }
I have the following code. It's a simplified code of a responsive design: In a certain screen size I want to show only the icon (blue - via ::before) but not the text.
When I try to hide the mail address via font-size: 0 (there will be an icon in the ::before) - the header grows in height.
Sure I could use max-height - but is there a cleaner solution?
Fiddle: https://jsfiddle.net/xs2wre4r/
<div class="header">
<span class="store-contact-email">
info#example.com
</span>
</div>
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com">info#example.com</a>
</span>
</div>
Left .header frame is computed = 25px
Right .header frame is computed = 30px
.header {
float: left;
}
.header .store-contact-email a:before {
line-height: 18px;
vertical-align: -36%;
padding-right: 5px;
background-color: blue;
width: 30px;
display: inline-block;
}
.header .store-contact-email a:before {
content: "x";
}
.store-contact-email {
border: 1px solid red;
}
.store-contact-email a {
font-size: 18px;
}
.store-contact-email a.hide {
font-size: 0px;
}
The problem is with the font sizes of the ::before blocks.
Since the second one has a font size of 0 and a line height of 18, it will be vertically positioned around the baseline, with 9px above and 9px below. The first one (with the normal font size) will be positioned normally (depending on the exact font), with, say, 14px above and 4px below.
(You also have vertical-align on the ::before, but that doesn't change the situation; it moves both ::before blocks 6.48 pixels down.)
So since the second one is located 5px lower than the first one, the bottom of the bounding box will be pushed down by 5px.
To illustrate,
span {
font-size: 18px;
border: 1px solid red;
background: rgba(255, 255, 0, .4);
}
span::before {
line-height: 18px;
vertical-align: -36%;
border: 1px solid blue;
background: rgba(0, 255, 255, .4);
width: 30px;
display: inline-block;
content: "x";
}
span.hide {
font-size: 0;
}
<span>visible</span>
<span class="hide">invisible</span>
Solution: don't use the font-size:0 trick.
You can set font-size of ::before, as it's inheriting parent font-size.
.header .store-contact-email a:before {
content: "x";
font-size: 18px;
}
Or you can use display or visibility, just avoid :before to inherit that property.
wrap the text with span and hide the span
<div class="header">
<span class="store-contact-email">
<a class="hide" href="mailto:info#example.com"><span>info#example.com</span></a>
</span>
</div>
.store-contact-email a.hide span {
display:none;
}
Better to:-
(1) nest the text info#example.com inside another span, which will display:none under a breakpoint; or
(2) put the icon on .store-contact-email:before instead of .store-contact-email a:before.
The reason is that browsers often enforce a minimum font size for accessibility purposes.
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
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.