Hi i am having two divs with same classes and all in that i need to hide one div anchor tag.Here is the code for that
.tribe-section.tribe-section-taxonomy.contactus:nth-child(n) {
display: none;
}
<div class="tribe-section tribe-section-taxonomy">
Contact us
<h3>Event Categories</h3>
</div>
<div class="tribe-section tribe-section-taxonomy">
Contact us
<h3>Event Tgas</h3>
</div>
.tribe-section.tribe-section-taxonomy:nth-child(4n) > .contactus {
display: block !important;
}
.tribe-section.tribe-section-taxonomy:nth-child(4n+1) > .contactus {
display: none !important;
}
Related
Unfortunately it wont display my drop-down nav block on hover, hope someone can help. I'm trying to change display:none to display: block on the class .moreMenu.
html
css
Here is my code...
HTML
<div class="navigationBar">
<div class = "navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<a href="contact.html" class= "more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</a>
</div>
CSS
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
You have an error in your HTML: you can't nest interactive elements. Since the .moreMenu div contains <a> elements, and is itself contained in an <a> element, it won't work.
Solution: don't put the <div> inside the MORE link, but put them next to each other in a container.
.more {
display: inline;
}
.moreMenu {
display: none;
position: absolute;
width: 140px;
height: 180px;
background-color: white;
z-index: 2;
}
.more:hover .moreMenu {
display: block;
}
<header>
<div class="navigationBar">
<div class="navigationBarTitles">
HOME
VERBS
NOUNS
ADVERBS
ADJECTIVES
GRAMMAR
<div class="more">MORE
<div class="moreMenu">
TRIAL VIDEOS
ABOUT
CONTACT
GCSE EXAM PREP
PLANS & PRICING
GRAMMAR
</div>
</div>
</div>
</div>
</header>
I have the following issue.
In a demo part I have the code below:
<style>
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>
<div class="manImgA">
<img src="url-to-image-1">
</div>
<div class="manImgB">
<img src="url-to-image-2">
</div>
<div class="manImgC">
<img src="url-to-image-3">
</div>
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.
But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.
Maybe this is what you are looking for?
Anyway siblings selector is for element that come after not before.
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
<div class="manImgA">
<img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>
<div class="manImgB">
<img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>
<div class="manImgC">
<img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>
If you want only with pure css,you must change pure css:
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>
<p class="text prijsb">Big size</p>
<div class="manImgB">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>
<p class="text prijsc">Very big size</p>
<div class="manImgC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>
The tilde ~ targets siblings which follow in the HTML markup order...
A ~ B = target B if and only if it follows A
To employ this feature of CSS in your example use something like this in your stylesheet...
/* hide all divs with a class
which begins with 'manImg' */
div[class^=manImg] {
display:none;
}
/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
display:block;
}
Hope that helped. :)
I'm trying to only display the first element and hide all other elements.
Here is an example:
<style>
h1 {
display: none;
}
h1:first-of-type{
display: block;
}
</style>
<body>
<div class="content">
<h1>Test</h1> <!-- only this one should be visible -->
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
</body>
Is there a solution without JS?
Using :first-of-type on h1 would not work, instead use that on the first .content's h1. Like so:
h1 {
display: none;
}
.content:first-of-type h1 {
display: block;
}
h1 {
display: none;
}
.content:first-of-type h1{
display: block;
}
<div class="content">
<h1>Test</h1>
123
</div>
<div class="content">
<h1>ABC</h1>
def
</div>
DEMO
.content ~ .content h1 {
display: none;
}
This is by what I know the shortest solution, it basicly picks all h1 elements expect the first one.
Explanation:
~ picks all siblings (elements) after the first .content class which have the .content class
If you want to read further W3 Schools with examplesW3 sibling combinators
I'm currently coding a very basic page for my friend and he said he wanted a box which would change color depending on which link he hovers over. I've tried a few things but none of it seem to work.
This is how the body looks:
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
}
#box {
padding: 30px;
border: solid;
}
li {
list-style: none;
text-decoration: none;
}
a,
a:hover,
a:active,
a:visited {
color: #fff;
text-decoration: none;
}
.twt:hover {
background: #c3c0d1;
color: #fff;
}
<div id="box">
<h1>social media</h1>
<div class="twt">
<li>twitter
</li>
</div>
<div class="ig1">
<li>art instagram
</li>
</div>
<div class="ig2">
<li>regular instagram
</li>
</div>
<div class="fb">
<li>facebook
</li>
</div>
<div class="yt">
<li>youtube
</li>
</div>
</div>
But I don't get how I should write the CSS to make the box another color when just, for example, hovering over the YouTube link. In my current CSS only the background of the text is changed when hovering and not the entire box.
Try using jQuery with the "onmouseover" event:
HTML:
<div id="box">
<a onmouseover="colorChange()" onmouseout="revert()" href="#">Link</a>
</div>
Javascript:
function colorChange() {
$("#box").css("background-color", "red");
}
function revert() {
$("#box").css("background-color", "lightgrey");
}
Here is my pen: http://codepen.io/Hudson_Taylor11/pen/ozQogO
Hope this helps!
Use jQuery:
$(".twt").hover(
function() {
$("#box").css( "background-color", "#000" );
},
function() {
$("#box").css( "background-color", "#98adca" );
}
);
Let me know if you need help setting up jQuery.
From what I know. CSS doesn't be made to walk backward. All I can think about the way I can do is using jQuery to do that.
$(document).ready(function(){
$('.ig1 li a').hover(function(){
$('#box').css({'background-color': 'green'});
});
$('.ig2 li a').hover(function(){
$('#box').css({'background-color': 'blue'});
});
$('.yt li a').hover(function(){
$('#box').css({'background-color': 'red'});
});
$('.fb li a').hover(function(){
$('#box').css({'background-color': 'pink'});
});
});
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
padding: 30px;
}
#box {
border: 3px solid #fff;
padding: 30px;
}
li {
list-style:none;
text-decoration:none;
}
a, a:hover, a:active, a:visited {
color: #fff;
text-decoration:none;
}
.twt:hover {
background: #c3c0d1;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box">
<h1>social media</h1>
<div class="twt">
<li>twitter</li>
</div>
<div class="ig1">
<li>art instagram</li>
</div>
<div class="ig2">
<li>regular instagram</li>
</div>
<div class="fb">
<li>facebook</li>
</div>
<div class="yt">
<li>youtube</li>
</div>
</div>
</body>
Right, so I started thinking, you can do it with JS, but can you do it with pure CSS. Short answer - No. CSS does not allow child elements to access parent elements, because of security and other concerns. A simple Google search will show you all the things I read, there's no point of sharing docs here. But what if we trick the user, right, just hear me out. Instead of changing the colour of the parent, which is illegal, let's change the colour of a sibling - allowed by CSS LinkSo I unified your classes, for the links to share the same class (they still have separate IDs, chill). I then added a "pretend div" which will serve the purpose of the body. I stylised the "pretend", the unified div and added a "sibling on hover" CSS rule. Take a look:HTML`
<body>
<div class="box">
<h1>social media</h1>
<div class="link_divs" id="div_1">
<li>twitter</li>
</div>
<div class="link_divs" id="div_2">
<li>art instagram</li>
</div>
<div class="link_divs" id="div_3">
<li>regular instagram</li>
</div>
<div class="link_divs" id="div_4">
<li>facebook</li>
</div>
<div class="link_divs" id="div_5">
<li>youtube</li>
</div>
<div id="pretend_div">
</div>
</div>
</body>
And here's the CSS
body {
color: #fff;
background: #98adca;
text-align: center;
margin: 275px auto;
padding: 30px;
border: 3px solid #fff;
height: 100%;
}
li {
list-style:none;
text-decoration:none;
}
a, a:hover, a:active, a:visited {
color: #fff;
text-decoration:none;
}
/* IMPORTANT - This will be the new "body" */
#pretend_div{
position: absolute; /* REQUIRED */
width: 96%; /* Matching your body size */
height: 180px; /* Matching your body size */
border: 1px solid red; /* Differentiating made easy */
top:0; /* IMPORTANT - push the element to the top */
left: 0; /* IMPORTANT - push the element to the left */
margin: 275px auto; /* Grabbed the margin from your body */
padding: 30px; /* Grabbed the padding from your body */
z-index: -1; /* IMPORTANT - push the element to the back of stack */
}
/* IMPORTANT - generic link class */
.link_divs{
z-index: 0; /* IMPORTANT - set the links on-top of the pretend div */
position: relative; /* IMPORTANT - positioning */
}
/* What link you hover over ~ The pretend div */
#div_1:hover ~ #pretend_div{
background-color: #00A000; /* change bck colour */
}
#div_2:hover ~ #pretend_div{
background-color: orangered;
}
#div_3:hover ~ #pretend_div{
background-color: darkgoldenrod;
}
REMARKS I'm aware this is not the best solution, honestly - just use JS. But I wanted to try and make it happen with pure CSS. Now I tried to match the pretend div to your body as best I could, thus it looks, well, not as good as it could. I added some comments to help you understand what is happening with each line. The ones that use the "sibling style" CSS are marked by Important. Everything else is just matching your body style.JSFiddle Demo -> DEMO LINKHope that helps
instead of background try background-color
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle