I have an "empty" div that I'd like to fill with text when I hover over an element. The text should be different for each element we hover over.
Here's the code
.text-info{
height: 50px;
width: 200px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.economics{
height: 100px;
width: 100px;
border: 2px solid black;
}
.economics:hover{
background-color: grey
}
.workforce{
height: 100px;
width: 100px;
border: 2px solid black;
}
.workforce:hover{
background-color: grey
}
#economics, #workforce{
display: none;
}
<div class="text-info">
<p id="economics">blabla</p>
<p id="workforce">blablabla</p>
</div>
<div class="economics"></div>
<div class="workforce"></div>
I've tried with css only, to set p's to display: block when hovering over .economics or .workforce, with no result.
Any help will be much appreciated, thanks!
With css you can only show elements on hover their parent element, like this:
.economics:hover #economics{
display: block;
}
This will work if #economics is inside .economics.
In this case you can add absolute position to #economics, to be in the .text-info holder visually.
<pre>
p {
margin: 0px;
}
.economics {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.economics p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
.workforce {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.workforce p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
</pre>
Just to cover other bases, you can use some simply jQuery to solve this using the .hover() method.
<script type="text/javascript">
$(".workforce").hover(function() {
$(".text-info").html("The workforce is amazing.");
}, function() {
$(".text-info").html("");
});
$(".economics").hover(function() {
$(".text-info").html("I love the economy.");
}, function() {
$(".text-info").html("");
});
</script>
Put this at the bottom of your <body> and it should work.
Check: https://jsfiddle.net/tww259xe/
If you really need a pure CSS solution, the only real option with the given markup would be the ~ general sibling selector. The caveat with that is the the sibling must follow the main selector, so you would have to reorder your divs. The CSS would look like so:
.workforce:hover ~ .text-info #workforce {
display: block;
}
.economics:hover ~ .text-info #economics {
display
}
See the fiddle
Related
Is it possible to do something like a background-color without any text in stylus.
span {
width: 5px;
height: 5px;
}
span.red {
background-color: #f00;
}
<span class="red"></span>
You need display: inline-block; also:
span {
display: inline-block;
width: 5px;
height: 5px;
}
DEMO
I have 2 elements in a div next to each other. How can I make them to be vertical-align=middle?
Example: http://goo.gl/6Hnb4D
HTML:
<div class="selected">
<span class="SelectedOption">Option 1</span>
<b class="button">▾</b>
</div>
CSS:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
}
.SelectedOption{
width: 250px;
}
.button{
display: block;
float: right;
}
To to align the contents to the middle vertically, just make the line-height the same as height like below:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
line-height: 50px;
}
Demo Fiddle
Alternative you can use display:table in your container and display: table-cell with vertical-align: middle in your sub as following:
.selected {
width: 300px;
height: 50px;
border: 1px solid black;
display:table;
}
.SelectedOption{
width: 250px;
display: table-cell;
vertical-align: middle;
}
fiddle
In CSS 3, change your class from this...
.SelectedOption{
width: 250px;
}
...to this...
.SelectedOption{
position: relative;
top: 30%;
transform: translateY(-50%);
width: 250px;
}
Top is (50% height) - (.5 * 1em) ...or more-or-less 30% in your option box.
See this terrific blog on the subject: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
I have the following HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test script</title>
<style>
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display: inline-block;
margin-top: 20px;
padding-left: 50px;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: inline-block;
height: 200px;
line-height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
What's really strange is that when you mouse over a div, the change in the border size causes the text within the div to be pushed down as well as the other divs to be pushed down as well.
However, if you remove the text from the divs (i.e., "1", "2", "3" and "4"), then the problem does not occur.
Why does the text within the divs cause the layout to break?
Thank you.
If you switch out display:inline-block; with display:block; float:left; it works in safari.
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display:block;
margin-top: 20px;
padding-left: 50px;
float:left;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float:left;
line-height: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
box-sizing: border-box;
}
http://jsfiddle.net/blaird/hFvPT/
I honestly have no idea why.
The problem is your line-height. It is set to 200px which is the same as the height of the box, so when you increase the border to 50px you only have room for 100px. One simple fix is to add the lower line-height number to your hover:
.inner div:hover {
border: #0F0 solid 50px;
line-height: 100px;
}
EDIT
As Barbara Laird has pointed out, this does not actually seem to fix the problem. You could add overflow:hidden to the box and make it work, but it is not pretty. An alternative solution, which also keeps your text vertically centered, would be to add a wrapper and use display:table:
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float: left;
display: table;
}
.inner div span {
display: table-cell;
vertical-align: middle;
}
Here is a working example: http://jsfiddle.net/7JH55/
I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available
http://jsfiddle.net/chovy/WcQ6J/
<div class="clearfix">
<aside>foo</aside>
<span><input type="text" value="Enter text" /></span>
</div>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
div {
border: 1px solid red;
}
aside {
display: block;
width: 100px;
background: #eee;
float: left;
}
span {
display: block;
width: 100%;
background: #ccc;
}
input {
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
It works fine with a span, but when I add input it wraps to next line.
Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!
http://jsfiddle.net/sheriffderek/DD73r/
HTML
<div class="container">
<div class="label-w">
<label for="your-input">your label</label>
</div>
<div class="input-w">
<input name="your-input" placeholder="your stuff" />
</div>
</div> <!-- .container -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
height: 2em;
}
.label-w {
width: 8em;
height: 100%;
float: left;
border: 1px solid red;
line-height: 2em;
}
.input-w {
float: none; /* key */
width: auto; /* key */
height: 100%;
overflow: hidden; /* key */
border: 1px solid orange;
}
.input-w input {
width: 100%;
height: 100%;
}
You could use the CSS calc property to determine the width minus the borders and aside width:
input {
width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
box-sizing: border-box;
border: 1px solid #000;
}
FIDDLE
You could use display: table-*:
div {
display: table;
width: 100%;
background-color: #ccc;
}
aside {
display: table-cell;
width: 100px;
background: #eee;
}
span {
display: table-cell;
background: #bbb;
}
input {
display: block;
width: 100%;
background-color: #ddd;
}
http://jsfiddle.net/userdude/WcQ6J/5/
This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.
You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.
aside {
display: inline-block;
width: 9%;
}
span {
display: inline-block;
width: 90%;
}
See jsfiddle.
In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?
CSS:
<style>
div.resize {
width: 300px; /*initial width*/
resize: horizontal;
overflow: auto;
}
HTML:
<div class="resize">
<input style="width: 100%" />
The little triangle to drag to resize the div will appear in the lower-right corner of the input element!
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below