I want a new <div> to appear on thumbnail hover.
You can inspect my code on http://techgeek.lt/naudinga/
This works:
#main:hover .whitewrapper {
display: block;
}
but it hovers on #main.
I already tried (and no luck):
img.thumbnail:hover .whitewrapper {
display: block;
}
#main img.thumbnail:hover .whitewrapper {
display: block;
}
.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail img:hover .whitewrapper {
display: block;
This works:
.post-more a:first-child:hover ~ .whitewrapper, .whitewrapper:hover {
display: block;
}
Both :first-child and the general sibling combinator (~) are supported in IE7+ and all modern browsers.
You need to fix that first a in each post:
<div class="post-more">
<a href=".." onclick=".."<a title=".." href=".." >..</a></a>
that's broken HTML, which causes the selector I've provided to fail in some browsers.
You may be able to use the + selector type.
If the div comes directly after the img, this should work:
img.thumbnail:hover + .whitewrapper {
display: block;
}
Update: I tested it and it works for me. Here's the jsfiddle.
Related
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
I came across the clearfix implementation below.
What could be the reason for the choice of the attribute selector (div[class="foobar"])? I cannot figure out any good reason for it. Why didn't the author use div.foobar?
div.foobar:after {
content: " . ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
div.foobar {
display: inline-block;
}
div[class="foobar"] {
display: block;
}
* html div.foobar {
height: 1%;
}
I tried to search for an answer to this both within Google, and on this website.
I have a website that needs to be made responsive. It's relatively intricate, but it's definitely possible with the design we currently have.
My question is this. Is there a responsive grid system, or an example of a fully responsive grid system that does NOT rely on box-sizing: border-box. After looking at Pure & Bootstrap, it seems both rely on that property to make it work.
When thinking about it in practice, it seems to me that a box-sizing:border-box model would be required to allow the use of percentages appropriately.
Why am I unable to use this method? Support of IE7 is absolutely required for this project. I know there are polyfills and htc files that can be used to force support, however, the scale and size of this site makes these options hard to implement. From what I've read, these options should be used in moderation, and a site of this caliber, it just couldn't be used in moderation.
Thanks.
In Twitter Bootstrap 3 you can remove the box-sizing in line 293.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Just remove this and in input declaration :)
Here is an example of the Bootstrap 2.3.x grid only using it mobile first, it kicks in at the 768 min width, you can change this value. To get this to be seen by IE7 and IE8 use Respond.js and make sure you read their docs. Basically you need to locally link (relative path) to the CSS for Respond.js.
This does not rely on box-sizing:border-box.
#media (min-width: 768px) {
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.row {
width: 100%;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both }
.row [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
}
.row [class*="span"]:first-child { margin-left: 0 }
[class*="span"].pull-right,
.row [class*="span"].pull-right { float: right }
.row .span12 { width: 100% }
.row .span11 { width: 91.43646408839778% }
.row .span10 { width: 82.87292817679558% }
.row .span9 { width: 74.30939226519337% }
.row .span8 { width: 65.74585635359117% }
.row .span7 { width: 57.18232044198895% }
.row .span6 { width: 48.61878453038674% }
.row .span5 { width: 40.05524861878453% }
.row .span4 { width: 31.491712707182323% }
.row .span3 { width: 22.92817679558011% }
.row .span2 { width: 14.3646408839779% }
.row .span1 { width: 5.801104972375691% }
.row .offset12 { margin-left: 105.52486187845304% }
.row .offset12:first-child { margin-left: 102.76243093922652% }
.row .offset11 { margin-left: 96.96132596685082% }
.row .offset11:first-child { margin-left: 94.1988950276243% }
.row .offset10 { margin-left: 88.39779005524862% }
.row .offset10:first-child { margin-left: 85.6353591160221% }
.row .offset9 { margin-left: 79.8342541436464% }
.row .offset9:first-child { margin-left: 77.07182320441989% }
.row .offset8 { margin-left: 71.2707182320442% }
.row .offset8:first-child { margin-left: 68.50828729281768% }
.row .offset7 { margin-left: 62.70718232044199% }
.row .offset7:first-child { margin-left: 59.94475138121547% }
.row .offset6 { margin-left: 54.14364640883978% }
.row .offset6:first-child { margin-left: 51.38121546961326% }
.row .offset5 { margin-left: 45.58011049723757% }
.row .offset5:first-child { margin-left: 42.81767955801105% }
.row .offset4 { margin-left: 37.01657458563536% }
.row .offset4:first-child { margin-left: 34.25414364640884% }
.row .offset3 { margin-left: 28.45303867403315% }
.row .offset3:first-child { margin-left: 25.69060773480663% }
.row .offset2 { margin-left: 19.88950276243094% }
.row .offset2:first-child { margin-left: 17.12707182320442% }
.row .offset1 { margin-left: 11.32596685082873% }
.row .offset1:first-child { margin-left: 8.56353591160221% }
}/* end min-width */
In my script there are three divs. I want to display div with class="ab" when I hover on first line and display div with class="abc", when hover on second line. Otherwise I want to display div with class="a" by default.
But it never displays the div with class="a".
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
Here is my JSFiddle of my problem: JSFiddle Link
To hide an element, use:
display: none;
visibility: hidden;
To show an element, use:
display: block;
visibility: visible;
The difference is:
Visibility handles the visibility of the tag, the display handles space it occupies on the page.
If you set the visibility and do not change the display, even if the tags are not seen, it still occupies space.
You need
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .a,
#f:hover ~ .a{
display: none;
}
Updated demo at http://jsfiddle.net/gaby/n5fzB/2/
The problem in your original CSS was that the , in css selectors starts a completely new selector. it is not combined.. so #f:hover ~ .abc,.a means #f:hover ~ .abc and .a. You set that to display:none so it was always set to be hidden for all .a elements.
you can use any of the following five ways to hide element, depends upon your requirements.
Opacity
.hide {
opacity: 0;
}
Visibility
.hide {
visibility: hidden;
}
Display
.hide {
display: none;
}
Position
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
clip-path
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
To show use any of the following:
opacity: 1;
visibility: visible;
display: block;
Source : https://www.sitepoint.com/five-ways-to-hide-elements-in-css/
Html Code :
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab hideDiv">First content</div>
<div class="abc hideDiv">Second content</div>
Script code:
$(document).ready(function() {
$("#f").mouseover(function(){
$('.a,.abc').addClass('hideDiv');
$('.ab').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
$("#s").mouseover(function(){
$('.a,.ab').addClass('hideDiv');
$('.abc').removeClass('hideDiv');
}).mouseout(function() {
$('.a').removeClass('hideDiv');
$('.ab,.abc').addClass('hideDiv');
});
});
css code:
.hideDiv
{
display:none;
}
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}
<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
html code :
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
css code :
#target {
background:#0099cc;
width:300px;
height:300px;
height:160px;
padding:5px;
display:none;
}
.Hide
{
display:none;
}
javascript code :
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});
I want to make a CSS menu auto-justify full width.
HTML:
<nav class="menu">
<ul>
<li>click</li>
<li>click</li>
<li>long clickclick</li>
<li>click</li>
<li>clickclickclick</li>
<li>click click 666</li>
</ul>
</nav>
CSS:
.menu {
text-align: justify;
font-size: 0;
font-size: 14px\9; /* IE6-9 hack */
line-height: 0;
}
.menu:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
zoom: 1;
*display: inline;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
.menu ul li {
display: inline-block;
font-size: 14px;
zoom: 1;
*display: inline;
}
.menu ul li a {
line-height: 54px;
}
Demo
It working good on Chrome/Firefox, but not working on IE 10-11. Coud someone please help me fix this?
I had the same problem, add text-justify: distribute to your .menu and it will work fine.
Do you mean you want to have the menu spread across the width of the page? In that case, adding min-width:100%; to .menu in your CSS file will achieve that.