I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>
Related
i wanted to know if in css there is a way to inject a display none to the relative of an attribute es;
<div class="classeA">
<div class="classeB" data-userid="1234" >
</div>
</div>
what should i use?
[data-userid="1234"] < .classeA{
display:none !important;
}
what should I do?
I want class classA with display none selecting the data-userid attribute
You could consider using :has(), although as of yet there is no support across any browser.
It would look something like this:
.classeA:has([data-userid="1234"]){
display:none;
}
Demo:
$('.classeA:has([data-userid="1234"])').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classeA">
<div class="classeB" data-userid="1234">
</div>
</div>
what I want is that div with id makeMeWork to be visible only when div with id clickMe is clicked.
the fiddle link.
html:
<div class="showhim">Press ME<div class="showme">Working</div></div>
<div class="showme" id='makeMeWork'>Not Working</div> <div class="showhim" id='clickMe'>Press ME</div>
css:
.showme{
display: none;
background-color:red;
width:200px;
height:50px;
}
.showhim:active .showme{
display : block;
background-color:green;
}
I want this done purely through css as js and HTML part can no longer be modified.
I guess the major problem now is, there is no way to select previous child in css,
similar questions : is-there-a-previous-sibling-selector and show-div-on-hover-with-only-css
do something like this
demo - http://jsfiddle.net/tbnsoc3y/
wrapping your content in div for eg like i have done
<div class="cont">
<div class="showme" id='makeMeWork'>Not Working</div>
<div class="showhim" id='clickMe'>Press ME</div>
</div>
Right Now There is No previous selection of sibling available but it will be soon in css4 which has been drafted in w3c and they are working on it , ill tell use jquery or css hack !
Read the article
Using CSS selectors, I would like to, on click of a link, put a box shadow around a div one element up.
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div id="selected_div">
<a><p id="click"></p></a>
</div>
</div>
</body>
</html>
I do not know which selectors to use. Please enlighten me.
Considering that you want to do an action based upon a click, it's better to use Javascript anyway. CSS has no parent selector and cannot detect a click. Here is the jQuery solution:
$("document").ready(function() {
$("#selected_div a").click(function() {
$(this).parent().css("box-shadow", "2px 2px 3px #fff");
}
}
Remember to include the jQuery library.
You can't style parent objects based on the state of their children (as of CSS3). This is doable with JS, but not with pure CSS.
Using :target selector you can highlight the parent element. Have a look at DEMO.
CSS Use Here
:target
{
background-color: gold;
box-shadow:2px 2px 3px #eee;
}
#selected_div
{
border:1px dashed #cecece;
}
HTML Code Used here.
<div class="container">
<div id="selected_div">
<a href="#selected_div">
<p id="click">Sample TEXT</p>
</a>
This content should be selected.
</div>
</div>
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
I Want to change the background of a Div when Hovering over another Div and i tried
HTML5 part:
<nav>
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="nav5"></div>
<div id="nav6"></div>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>
And the CSS i tried is
#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}
But it is not working ...
I need to do it with css only no javascript ..
The way CSS selectors works is Parent > Descendant
When you do
#nav2:hover #nav8
It means that #nav8 is a descendant of #nav2, which is not the case in your markup, so the rule does not apply
You have to use javascript to do what you're after.
It's impossibru. You can change the background of the div itself, and any child divs, when you are hovering it, but with a sibling/parent sibling/completely unrelated element - no way.
You could, however, do it in jQuery.
Example:
$("#nav2").mouseover(function() {
$("#nav8").addClass("someClassName");
});
$("#nav2").mouseout(function() {
$("#nav8").removeClass("someClassName");
});
And then hook up that background-image to #nav8.someClassName.
Use this Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("#nav2").hover(function(){
$("#nav8").css("background-image","url(images/nav_08-nav_02_over.jpg)");
},function(){
$("#nav8").css("background-image","");
});
});
</script>
There is no way you can add effects on same level tags in CSS3. On hover of a parent tag only child tags can have different CSS.
it's impossible unless your div are siblings, so you can achieve the effect using
+ adjacent siblings selectors (css2) or
~ general siblings combinator (css3)
e.g. if your markup is structured in this way
<div id="nav1"></div>
<div id="nav2"></div>
...
<div id="nav9"></div>
you can apply some style to nav2 hovering nav1 with
#nav1:hover + #nav2 { ... }
because nav2 is an immediate (adjacent) sibling of nav1 (in this case + or ~ would have the same effect), or you can do the same on nav9 hovering nav1 with
#nav1:hover ~ #nav9 { ... }
(here you can use only the ~ selector.)
Note also that these selectors are available on all modern browser including Internet Explorer 7+, see http://html5please.us/#gtie6