Hover effect on a different element - html

I have this structure:
HTML
<div class="bottom-container">
<div class="double-arrow"></div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>
The .bottom-box-text isn't displayed on default. It has a display:none property.
I need to display the .bottom-box-text div when I hover over the .double-arrow div. But I cant figure it out.
I have this CSS:
.double-arrow:hover .bottom-box-text {
display: inline;
}
I tried different selectors (like "+" "~"), but it doesn't work.
Thank you if you can help!

You can use general sibling selector to select .bottom-box first:
.bottom-box-text {
display: none;
}
.double-arrow:hover ~ .bottom-box .bottom-box-text {
display: inline;
}
<div class="bottom-container">
<div class="double-arrow">Arrow</div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>

.double-arrow:hover + div > .bottom-box-text {
display: inline;
}
Basically, when the double arrow is hovered, the div right after is selected and its children having .bottom-box-text will have the effect applied. If it doesn't, you'll maybe have to use !important as an attribute on display.

Related

How to force all tag using style in parent's tag?

I have some code html like:
<div style=color: green>
<span style="color:black>Some text</span>
<p style="color:red>Some text</p>
<div style="color:blue>Some text</div>
</div>
I want all 'Some text' have red follow by it's parent, please help!
Welcome to SO Dear
Use * selector with !important as you use inline style so
!important need for override that.
div *{
color: inherit !important;//parent color you can change it
}
<div style="color: green">
<span style="color:black">Some text</span>
<p style="color:red">Some text</p>
<div style="color:blue">Some text</div>
</div>
And also you missed " around your styles
the best and smart way to make that is creating a class to reuse the code in a future, you can make this
.custom-parent > .custom-child{
color:green !important;
}
<div class="custom-parent">
<p class="custom-child">some text</p>
some text
<spam class="custom-child">some text</span>
</div>
I recommend the parent div to have a class like parent.
From there, I would do.
.parent {
color: green;
}
.parent * {
color: inherit !important;
}

Display p elements as block within an inline-block span

So I have some inline-block elements like so:
<span style="display: inline-block">
<img>
<p>Some text</p>
<p>Some more text</p>
<button>A button</button>
</span>
I want them all inline except I want the first p element positioned on top of the other one yet have both together inline with the rest of the span. From what I've been reading, it's bad practice to put a div inside a span, so what's the best way to do this?
It's not "bad practice", it's simply impossible. The browser will "correct" your HTML and it will not behave as expected.
Try using <div style="display:inline-block"> as your container instead.
Here's a wild guess at what you're after based on my comment above.
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
background: #ddd;
border: 1px solid #aaa;
vertical-align: top;
}
<div class="table">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/300/200" />
</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">
<p>Paragraph one. Paragraph one. Paragraph one.</p>
</div>
</div>
<div class="row">
<div class="cell">
<p>Paragraph two. Paragraph two. Paragraph two.</p>
</div>
</div>
</div>
</div>
<div class="cell">
<button>Button</button>
</div>
</div>
</div>
As #Neit pointed out, the browser will correct the DOM when you put block-level elements inside inline elements (see first example). A div, or maybe a section is definitely a better choice both for valid and semantic markup.
Using CSS to change display: does work, but it isn't best practice (for example an em in place of your span above will render exactly the same). Certain versions of browsers will also ignore some types of display: changes; thus, your code would fail. So using a better container is going to provide the fewest headaches.
See the code here:
https://jsfiddle.net/9mf91b1v/

nth:child selector - different parrents

So i've always had some misunderstanding with nth child and selectors.
I have been trying to figure it out but after searching I could not find the answer.
This is my css
p.hi:nth-of-type(1) {
color: blue;
}
This is my html
<div class"head">
<p class="hi">This is some text.</p>
</div>
<div class"head">
<p class="hi">This is some text.</p>
</div>
Currently this css is applying the color blue to both paragraphs. How do I make it only add it to the first? I know that if i put them both in the same div it works but what if it is nested several times. How do i select only one?
Take a look at this fiddle.
http://jsfiddle.net/x9jkq0x3/
You can do it like this Fiddle
div:nth-of-type(1) p.hi {
color: blue;
}
<div class="head">
<p class="hi">This is some text.</p>
</div>
<div class="head">
<p class="hi">This is some text.</p>
</div>
you can use first-child to class head instead class hi
this is the example Fiddle

Showing/hiding elements inside a div block with HTML and CSS

I would like to show/hide elements inside a div block. A similar post showed me how, but I can't make the links inside the div block work properly.
The div block:
<div class="collapse" tabindex="1">
<h1> Test </h1>
<p>link</p>
<p>some other text</p>
</div>
The CSS part:
.collapse > * + *{
display:none;
}
.collapse:focus > * + *{
display:block;
}
Here is a JSFiddle of my script.
Basically, as I click on the link, the div block collapse.
Do you know how can I fix this? Thanks!!
You can't do this natively with CSS, you'll have to use JavaScript. Here is my code:
HTML:
<h1>Test</h1>
<div class="show-on-click">
link
<p>some other text</p>
</div>
CSS:
.show-on-click {
display: none;
}
.show-on-click.is-active {
display: block;
}
JavaScript (jQuery):
$(".clickme").on("click", function () {
$(".show-on-click").toggleClass("is-active");
});
I hope this all makes sense. Sorry I had to kind of massacre your code to achieve it. I've updated your jsfiddle here.

Why is the :not selector not working

I am trying to figure out why the not selector is not working. Here is my code:
http://jsfiddle.net/8CKJa/15/
CSS:
#full-content, #mobile-content {
display: none;
}
.collapsed .make #mobile-content {
display: block;
}
.content:not(.collapsed) .make #full-content {
display: block;
}
HTML:
<div class="content">
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>
</div>
I am trying to hide the full-content div. As you can see .content:not(.collapsed) is not suppose to match any of the divs but it is matching the full-content div. How can I hide the full-content div. I am not sure how many .content parents there will be. The collapsed class can disappear if the menu is expanded.
The :not() selector is working as expected. The issue is that your wrapper div has the class of content without collapsed and then you have one with the class collapsed. Removing the first div makes it work as expected.
http://jsfiddle.net/3L7ym/
<div class="content collapsed">
<div id="car">
<div class="make">
<div id="full-content">
full content
</div>
<div id="mobile-content">
mobile content
</div>
</div>
</div>
</div>
Presuming you are looking to key off of .collapsed and you can't know ahead of time how many .content containers you'll have, you may be able to simplify the whole thing by removing the :not selector:
.collapsed #mobile-content {
display: block;
}
.collapsed #full-content, #mobile-content {
display: none;
}
Fiddle here.