When I hover over an HTML element I would like that element to inherit the properties of a pre-written CSS class.
Is there a way to accomplish this task without Javascript?
Write a hover class for an item, which does the exact same thing that you are describing.
.box{
height: 60px;
width: 60px;
border: 1px solid black;
margin: 20px;
}
.box1:hover, .box2{
background-color: red;
}
<div class="box box1"></div>
<div class="box box2"></div>
More simply:
.box{
height: 60px;
width: 60px;
border: 1px solid black;
margin: 20px;
}
.box:hover{
background-color: red;
}
<div class="box"></div>
In your CSS file, write a hover selector for the element you are targeting:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
Creating the :hover selector will inherit the properties associated when the mouse hovers over the selected element.
<div>
Example 1
</div>
Hope that answers your question!
<div mouseover="this.className='myClass'" onmouseout="this.className=''">
Hover Me
</div>
That would add / remove the class name with javascript, otherwise do this in CSS:
div:hover {
background-color: red
}
Related
Im having an issue where my background color for a child element is going past my parent elements borders. How could I remedy this?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Edit: I should mention I tried adding the same border radius only to the top of banner but this then left a small gap of white space between the color and the border of the parent.
overflow:hidden will prevent the inner child elements from extending beyond the bounds of the parent.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Apart from using overflow: hidden, it's also possible to use contain: content, which tells other elements that the child elements inside that particular element will never affect other elements, and will also never be displayed outside the parent element.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
#myUserMenu {
position: absolute;
background-color: white;
top: 20px;
width: 116px;
border: 1px solid #CCC;
}
#myAvatar:hover #myUserMenu {
background-color: red;
}
.menuItem {
cursor: pointer;
border-bottom: 1px solid #EEE;
}
<img id='myAvatar'>some text here...
<div id="myUserMenu">
<div class='menuItem'>Status online</div>
<div class='menuItem'>Status offline</div>
</div>
So when I hover the myAvatar, myUserMenu background should change to red
#myAvatar:hover #myUserMenu
And nothing happens ! Any idea why ?
Enclose the text inside a span and use + operator to affect the next element's style.
#myUserMenu {
position: absolute;
background-color: white;
top: 20px;
width: 116px;
border: 1px solid #CCC;
}
#myAvatar:hover + #myUserMenu {
background-color: red;
}
.menuItem {
cursor: pointer;
border-bottom: 1px solid #EEE;
}
<span id="myAvatar">some text here...</span>
<div id="myUserMenu">
<div class='menuItem'>Status online</div>
<div class='menuItem'>Status offline</div>
</div>
#myAvatar:hover #myUserMenu {
background-color: red;
}
This selector is looking for #myUserMenu inside #myAvatar. Obviously that won't work because it's outside #myUserMenu.
What you could do is look for #myUserMenu immediately after #myAvatar, like so:
#myAvatar:hover + #myUserMenu {
background-color: red;
}
This is the Adjacent Sibling Combinator. See this article for more details.
Or you could rearrange your HTML to put #myUserMenu inside #myAvatar.
Your div #myUserMenu is not a child of your image, so you need to target the div with a brother selector :
#myAvatar:hover ~ #myUserMenu {
background-color:red;
}
JsFiddle: http://jsfiddle.net/ghorg12110/o0c2hppv/
The general sibling combinator selector ~ allow you to select the element which can appear anywhere after it.
You have to apply parent child relationship in order to apply hover.
Like this
#myUserMenu {
position: absolute;
background-color: white;
top: 20px;
width: 116px;
border: 1px solid #CCC;
}
#myAvatar:hover #myUserMenu {
background-color:red;
}
.menuItem {
cursor:pointer;
border-bottom:1px solid #EEE;
}
<div id="myAvatar">
<img id=''> some text here...
<div id="myUserMenu">
<div class='menuItem'>Status online</div>
<div class='menuItem'>Status offline</div>
</div>
</div>
Let we have the following html markup:
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
and corresponding css styles:
.parent{
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background:grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
.parent {
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background: grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child {
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
We can see that child's border color is black, but i dont define this color explicitly.
How I can change this default color to green?
You can't change the default. The default is whatever the browser defines it as.
If you want to inherit the value from the parent (as your mentioning the parent in the question implies), then you must explicitly inherit it.
.child {
border-color: inherit;
}
You must also not use the shorthand border property with the color value omited, since that will reset the property to the default.
.child {
border-color: inherit;
border-width: 20px;
border-style: solid;
}
You can also simply be explicit:
.child {
border-color: green;
border-width: 20px;
border-style: solid;
}
Most of the currently accepted answer is inaccurate:
You can change the default border color: not by CSS, but in the user's graphic environment (system settings, usually available as desktop settings in OS).
You can omit the color value in border shorthand property. In CSS3 the border-color is then set to currentColor, which can also be specified explicitly.
border: 1px solid currentColor; /* CSS3 */
The currentColor is usually black by default system settings. In CSS2, you can also use other system values, see in the link above. These are deprecated, but still working in my Opera.
border: 1px solid ThreeDDarkShadow; /* CSS2 deprecated */
Now the color is gray in my environment. The CSS2 values are (quoting the link above):
ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace,
ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText,
Highlight, HighlightText, InactiveBorder, InactiveCaption,
InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText,
Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.
Note: currentColor is different from inherit (which will solve your problem as Quentin suggests) and there is no value keyword like default, auto or initial in border-color property. One might think that if you specify invalid or browser-unsupported color, the browser has to pick some color and if there is no way to infer that color, it logically picks the system color anyway since browsers don't stop output on syntax error. However, some browsers implement a mystical numerologic algorithm to infer colors from unknown strings. It doesn't apply in my Opera.
Check your system colors in the snippet
div { float: left; margin: 5px; width: 125px; padding: 20px; border: 1px solid black; color: #800; text-shadow: 0 1px black;}
.ActiveBorder { background-color: ActiveBorder; }
.ActiveCaption { background-color: ActiveCaption; }
.AppWorkspace { background-color: AppWorkspace; }
.Background { background-color: Background; }
.ButtonFace { background-color: ButtonFace; }
.ButtonHighlight { background-color: ButtonHighlight; }
.ButtonShadow { background-color: ButtonShadow; }
.ButtonText { background-color: ButtonText; }
.CaptionText { background-color: CaptionText; }
.GrayText { background-color: GrayText; }
.Highlight { background-color: Highlight; }
.HighlightText { background-color: HighlightText; }
.InactiveBorder { background-color: InactiveBorder; }
.InactiveCaption { background-color: InactiveCaption; }
.InactiveCaptionText { background-color: InactiveCaptionText; }
.InfoBackground { background-color: InfoBackground; }
.InfoText { background-color: InfoText; }
.Menu { background-color: Menu; }
.MenuText { background-color: MenuText; }
.Scrollbar { background-color: Scrollbar; }
.ThreeDDarkShadow { background-color: ThreeDDarkShadow; }
.ThreeDFace { background-color: ThreeDFace; }
.ThreeDHighlight { background-color: ThreeDHighlight; }
.ThreeDLightShadow { background-color: ThreeDLightShadow; }
.ThreeDShadow { background-color: ThreeDShadow; }
.Window { background-color: Window; }
.WindowFrame { background-color: WindowFrame; }
.WindowText { background-color: WindowText; }
<div class="ActiveBorder">ActiveBorder</div>
<div class="ActiveCaption">ActiveCaption</div>
<div class="AppWorkspace">AppWorkspace</div>
<div class="Background">Background</div>
<div class="ButtonFace">ButtonFace</div>
<div class="ButtonHighlight">ButtonHighlight</div>
<div class="ButtonShadow">ButtonShadow</div>
<div class="ButtonText">ButtonText</div>
<div class="CaptionText">CaptionText</div>
<div class="GrayText">GrayText</div>
<div class="Highlight">Highlight</div>
<div class="HighlightText">HighlightText</div>
<div class="InactiveBorder">InactiveBorder</div>
<div class="InactiveCaption">InactiveCaption</div>
<div class="InactiveCaptionText">InactiveCaptionText</div>
<div class="InfoBackground">InfoBackground</div>
<div class="InfoText">InfoText</div>
<div class="Menu">Menu</div>
<div class="MenuText">MenuText</div>
<div class="Scrollbar">Scrollbar</div>
<div class="ThreeDDarkShadow">ThreeDDarkShadow</div>
<div class="ThreeDFace">ThreeDFace</div>
<div class="ThreeDHighlight">ThreeDHighlight</div>
<div class="ThreeDLightShadow">ThreeDLightShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="Window">Window</div>
<div class="WindowFrame">WindowFrame</div>
<div class="WindowText">WindowText</div>
* { border-color: green; }
keep in mind using wildcard selectors is not encouraged from a performance perspective
Add border-color: green; in the .child class. See updated fiddle
You change change as below to make the border color green
.child {
border : 20px solid green;
}
If it's only divs with the child class, you can use this in your stylesheet.
.child { border-color:#00ff00!important; }
That is browser behavior, you cannot change that behavior until there is any theme you apply, what you can do is to override color by using:
border-color: green;
Here is fiddle
Use color:green. When border-color is not specified, browser uses text color of an element as its border-color
I need your help.
I can't seem to be able to get the hover working properly over a wrapper/container DIV
CSS:
#myhover:hover {
border: 1px solid red;
}
HTML:
<div id="myhover" style="background: #ffffff;
width: 177px; height: 20px; border: 1px solid #808080;">
<div style="float: left;">
<input id="refdocs" style="padding-left: 4px; padding-right: 3px;
height: 15px; width: 158px; border: none;" type="text">
</div>
<div style="line-height:18px; font-size: 11pt; color: #779297;">+</div>
</div>
Because inline styles are the most specific in the cascade, they can over-ride things you didn't intend them to. Move your #myhover styles into a style sheet then it should work fine.
for example:
#myhover {
background: #ffffff;
width: 177px;
height: 20px;
border: 1px solid #808080;
}
jsfiddle: http://jsfiddle.net/va8Bz/
Your style attribute is overriding your stylesheet selectors. It's more specific.
You have three options here:
Move your styles out of the style attribute.
Move your styles out of the style attribute.
Add !important to the style declarations that should override the ones in your style attribute.
I suggest you move your styles out of the style attribute into a stylesheet.
Example: http://jsfiddle.net/Y7NW9/
You need to stick all your CSS in a stylesheet instead of using inline styles.
What you're trying to accomplish can be done with less markup too:
<div class="container">
<input class="refdocs" type="text">
<div class="icon">+</div>
</div>
Then in your CSS stylesheet:
.container {
display: inline-block;
position: relative;
}
.input-wrapper {
float: left;
}
.refdocs {
border: 1px solid #808080;
padding: 2px;
padding-right: 14px;
margin: 0;
}
.refdocs:hover {
border: 1px solid red;
}
.icon {
font-size: 11pt;
position: absolute;
top: 3px;
right: 5px;
}
Here's a working demo
I solved this for you in your previous question:
#add {
float: right;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
}
#add:hover {
color: #f00;
}
http://jsfiddle.net/kUSBM/
Please respond to the questions or accept answers.