I am trying to display a div (.mydiv3) when another is hovered, but the div I want to display...
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Is there a way to do this with CSS or is jQuery my best bet?
You can use ~ in CSS to get the desired result. Check the snippet.
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
.trigger:hover~.mydiv3{
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Edit : With jQuery in case elements are not siblings
$(.trigger).on('mouseenter', function(){
$('.mydiv3').show();
};
$(.trigger).on('mouseleave', function(){
$('.mydiv3').hide();
};
Hope this helps
You can use the general sibling selector for this.
.mydiv1,
.mydiv2,
.mydiv3 {
display: none;
}
.trigger {
text-align: center;
padding: 10px;
color: teal;
}
.trigger:hover {
background: red;
}
.trigger:hover~.mydiv3 {
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
With JQuery:
$(".trigger").mouseout(function() {
$(".mydiv3").hide();
})
.mouseover(function() {
$(".mydiv3").show();
});
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
<style>
#b2-Column1 {
background-color:red;
min-height:120px;
}
#b2-Column1 > div {
background-color:yellow;
min-height:100px;
}
</style>
<div id="b2-Column1">
<div><!-- some comments here's --></div>
</div>
How can I do, if the yellow section is empty, then I want to both red and yellow setting to display:none;
The best you can do is to hide the yellow part with :empty pseudo-class, however, as we don't have a parent selector, you will have to look for JavaScript solution for the red part.
.container {
background-color: red;
min-height: 120px;
margin-top: 1em;
}
.child {
background-color: yellow;
min-height: 100px;
}
.child:empty {
display: none;
}
<div class="container">
<div class="child"><!-- some comments here's --></div>
</div>
<div class="container">
<div class="child">
<p></p>
</div>
</div>
If you want to do from Jquery then apply this:-
if($("#b2-Column1 > div").text() != ''){
console.log('Not Emtpy');
}
else{
console.log('Empty');
$("#b2-Column1 > div,#b2-Column1").hide();
}
I'm having some nested divs and I'd like to 'glue together' the text of the divs such that it seems to be a single sentence. This is my code (http://jsfiddle.net/gorwmgj1/):
<div class="content">
<div class="field-name-field-plaats">
<div class="field-items">
<div class="field-item even">This is some random text.</div>
</div>
</div>
<div class="field-name-field-aantal">
<div class="field-items">
<div class="field-item even">10</div>
</div>
</div>
</div>
.content {
width: 100px;
background-color: #ccc;
padding: 5px;
}
.field-name-field-plaats::before {
content:"# ";
}
.field-name-field-plaats {
display: inline;
}
.field-name-field-aantal::before {
content:" (";
}
.field-name-field-aantal::after {
content:"x)";
}
.field-name-field-aantal {
display: inline;
}
.field-items {
display: inline-block;
}
So, for example, the output should be something like
# This is
some random
text. (10x)
instead of
#
This is some
random text.
(10x)
How can I change my CSS to achieve this?
Simple add this:
div{
display: inline;
}
not too sure html is wise structured, but just turn your div into inline boxe :
.field-name-field-plaats div {
display:inline;
}
http://jsfiddle.net/gorwmgj1/1/
I gonna try to make a list of element float and clear both at the next new row because height of box are unknown and we can hide box to highlight box by category, like:
$('nav a').on('click', function(e) {
e.preventDefault();
var show = $(this).data('show');
if(show == 'all') {
$('div').show();
} else {
$('div').hide();
$('.' + show).show();
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
article {
width: 400px;
}
div {
width: 100px;
border: 1px solid black;
float: left;
padding: 10px;
margin-bottom: 10px;
}
.category-b {
background-color: #eee;
}
div:nth-child(4n+5) {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a data-show="all" href="#">All</a> /
<a data-show="category-a" href="#">Category A</a> /
<a data-show="category-b" href="#">Category B</a>
</nav>
<article>
<div class="category-b">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-a">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-b">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-b">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
</article>
http://jsfiddle.net/Pik_at/Lwyte7sm/
The problem are, when you select an category the nth-child also takes into account the hidden box by display:none and broke the mosaic.
Would anyone have a solution? Css solution will be appreciated.
Quickest CSS solution:
Set a fixed height for each DIV, then float left without clear:both.
div { height:80px; }
DEMO
Or, you can use jquery to get the highest height for all DIVs and float left to get the same result.
/====================================================/
How about use display:inline-block; instead of float:left; ?
DEMO 2
*The width % might need to decrease as display:inline-block; generates some space between the DIVs.
I'd like to place a Div for image and a Div for text at the same baseline.
Below is my sample code and JSFiddle.
http://jsfiddle.net/xLrf7pyt/
<div class="wrap">
<div class="img">
<img src="http://www.cssportal.com/images/cssportal.png" />
</div>
<div class="txt">
This is text.
</div>
</div>
<style>
.wrap { width: 500px;}
.img { float: left; }
.txt { }
</style>
============ Update ================
Originally, there should be some empty space between image (logo at left-top corner) and text (navigation at right-top) with same baseline with image logo.
Drop the float from your .img element and instead set both .img and .txt to display: inline:
.img, .txt {
display: inline;
}
Then set .txt to have a vertical-align of baseline:
.txt {
vertical-align: baseline;
}
JSFiddle demo.
Use display:inline;
.wrap { width: 500px;}
.img { display:inline; }
.txt { display:inline; }
<div class="wrap">
<div class="img">
<img src="http://www.cssportal.com/images/cssportal.png" />
</div>
<div class="txt">
This is text.
</div>
</div>
This is my situation
HTML
<div id="content">
<div id="item1">
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
</div>
<div id="item2">
<div class="empty"> </div>
</div>
</div>
CSS
.empty
{
width: 100px;
height: 100px;
background-color: red;
}
#item1
{
float: left;
padding: 10px;
background-color: green;
}
#item2
{
float: left;
padding: 10px;
background-color: blue;
}
#content
{
padding: 10px;
background-color: pink;
overflow: hidden;
}
This looks that http://jsfiddle.net/59qEt/3/
So my question is: How I must set my styles to #item2 has the same height which #item1 have?
Any help would be appreciated.
You can use display:table-cell property for this. and remove float:left write like this:
#item1, #item2
{
display:table-cell;
}
Check this http://jsfiddle.net/59qEt/5/
Note it's work till IE8 & above.
in item 1 you are using 3 div each div with padding:10px; and in item 2 just 1 div you can do 2 thing 1 in item 2 add 3 div and option 2. apply height on item 2 and item 2 child empty
remove the item2 from css
`
<div id="item1">
<div class="empty"> </div>
<div class="empty"> </div>
<div class="empty"> </div>
</div>
<div id="item1">
<div class="empty"> </div>
</div>
`
You can try something like this:
#item2 > div {
padding-bottom:200px;
}
Here's the fiddle for this :
http://jsfiddle.net/59qEt/24/
Just add two string of JavaScript http://jsfiddle.net/59qEt/20/
Works in all browsers