i'm trying to get this working but i cant figure out why it wont, is there a way of troubleshooting this i.e to see errors
What i am trying to achieve is to show the info in the showhim div when i hover over the stat1 div but it aint happening.
I put it here:
http://jsfiddle.net/ksvrY/39/
<div id="post-wrap">
<div class="showhim" id="stat1_text">
This is some example test<br />
This is another line<br />
And another one<br />
And a final one
</div>
<div id="stat1" class="stat1">
Hover over this div
</div>
</div>
.showhim
{
display: none;
margin-bottom: 30px;
}
.stat1:hover .showhim
{
display: block;
}
Edit: As pointed out by Paul, you can use the sibling selector. So there is actually a way to do this with pure css in this case
.stat1 is not a parent of .showhim.
You can use javascript. So something like (using jQuery):
$('.stat1').mouseover(function(){
$('.showhim').show();
}).mouseout(function(){
$('.showhim').hide();
});
See http://jsfiddle.net/ksvrY/50/
You could do a sibling select.
<div id="post-wrap">
<div id="stat1" class="stat1">
Hover over this div
</div>
<div class="showhim" id="stat1_text">
This is some example test<br />
This is another line<br />
And another one<br />
And a final one
</div>
.showhim
{
display: none;
margin-bottom: 30px;
}
.stat1:hover ~ .showhim
{
display: block;
}
For it to work, the .showhim needs to be a child element of .stat1.
agree with paul
and here's another solution:
move .showhim into #stat1:
<div id="post-wrap">
<div id="stat1" class="stat1">
Hover over this div
<div class="showhim" id="stat1_text">
This is some example test<br />
This is another line<br />
And another one<br />
And a final one
</div>
</div>
</div>
Related
I have an html structure defined like this:
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
...
</div>
</div>
What I would like to be able to do is use the "container" style to recursively go through its children and locate the first instance of type <img/> and force a display:none;. Kind of like this (non-working css):
.container {
width: 100%;
> img:first-of-type {
display: none;
}
}
From what I understand the 'first-of-type' selector only works at the sibling level, however for reasons I am only able to operate at the "container" level - so is there a way to recursively select the first instance of an image from the styling at the great-grandfather level?
On my own understanding, ">" selector selects the elements that is first descendant of an element. Like for example div > img, this one selects all the img that are first descendant of the div and not the img that is on its second successor.
So, if I didn't misunderstood your question, what you are trying to accomplish is to find the very first img inside the .container class by using the :first-of-type selector. If we base on the structure of your elements, it will never happen. This is because you are using ">" selector but there are no direct descendants of img inside since images are being wrapped inside .photoWrapper class. And if you use div img:first-of-type, this will select all the first instance of image inside the div as well as in its successors.
Sadly, I think there's still no feature/selector on CSS that can find elements to all its successor in accordance to your question. You can read about selectors here:
https://www.w3schools.com/cssref/css_selectors.asp /
https://www.w3schools.com/cssref/css_selectors.asp
Hmm I don't know if you prefer this, but here's my workaround for your question. I will use find('img:first') function of jquery.
Hope this will help you.
$(document).ready(function(){
$('.container').find('img:first').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" alt="1" />
</div>
<div class=photoWrapper>
<img class="image" alt="2" />
</div>
<div class=photoWrapper>
<img class="image" alt="3" />
</div>
...
</div>
</div>
What about:
.container .photoWrapper:first-child img {
display:none;
}
I'm a beginner at this. I have text and input buttons in a div on a tumblr theme, intending it to show up only on the homepage, but it shows up on all pages at the bottom. Is there a way to hide it for all others, set some sort of parameter, etc?
There is more than one way to achieve this. The easiest one is to add at the head section <style> #id, or .class {display: none}</style> you use either class or id or hide the div that contains them.
You could slice your page content like this:
There are three types of HTML models :
Layouts (or Templates, Grids), which represent a structure to hold Components.
Components (or Modules) which represent a sufficient and consistent auto part.
Contents (or Datas) which represent data could be found into HTML, JSON or MongoDB (database).
e.i.
<body class="layout-class">
<section class="component-class-1"></section>
<section class="component-class-2"></section>
<section class="component-class-3">
<input class="input" />
</section>
</body>
So if you have an input like this:
<body>
<div>
<input class="input" />
</div>
</body>
with this CSS
.input {
display: inline
}
you could only hide this on the homepage layout like this:
<body class="home">
<div>
<input class="input" />
<div>
</body>
and
.home .input {
display: none;
}
or only on the overview component
<body>
<div class="overview">
<input class="input" />
<div>
</body>
and
.overview .input {
display: none;
}
or only on overview into homepage, etc.
<body>
<div class="overview">
<input class="input" />
<div>
</body>
.homepage .overview .input {
display: none;
}
I have a markup which contains div with some images as shown. Currently each section of div appears vertically. But, i want to show the items on left & text on right as shown in screen dump.
HTML Markup:
<div id="divgetpaidnow" style="float:none;width:200px;" class="paymentclass" paytype="GetPaidNow" paytypeid="1">
<asp:Image ID="Image1" src="images/getpaidnow.jpg" runat="server" class="paymentimg" />
<div>
</div>
<asp:RadioButton ID="rdo1" Text="Get Paid Now" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText" style="float:none;"> <strong>Get Paid Now:</strong><br />
Instant Cash, visit one of our Mall Locations and get Paid Today
</div>
</div>
<div id="divamazon" style="float: none;" class="paymentclass" paytype="Amazon" paytypeid="2">
<asp:Image ID="Image2" src="images/amazon.jpg" runat="server" class="paymentimg" />
<div style="margin-top: 10px;">
</div>
<asp:RadioButton ID="rdo2" Text="Recommended" runat="server" class="myradio" GroupName="rdoPaymentgroup" />
<div class="payTypeFooterText">
<strong>Amazon Gift Card:</strong><br />
Get paid quickly via electronic gift card and receive an extra 5%</div>
</div>
css:
.payTypeFooterText
{
width: 120px;
font-style: normal;
font-size: 10px;
}
.myradio
{
color: grey;
font-size: 12px;
text-decoration: none;
}
Just these two css other class names are used for accessing elements using JQUERY.
Help Appreciated!
You can use css property float to align content on pages
<div>
<div style='float:left;'>
----content---
</div>
<div style='float:right;'>
----content---
</div>
</div>
Have a common class for all the divs and use display:inline-block
div{
display:inline-block;
background:red;
}
DEMO
I want the text to change completely when someone hovers over it. I found code online that should work, but it doesn't. Any suggestions?
<span class="show">
<p>if { <br /></p>
<p>yourSite < awesome; <br /></p>
<p>solution = aislingDouglas (HTML5 + CSS3 + <br /></p>
<p>JavaScript + PHP); <br /></p>
<p>} <br /></p>
<p>else { <br /></p>
<p>solution = null; <br /></p>
<p>} </p>
</span>
<span class="noshow">
<p>Need a website? <br /></p>
<p>You found your dream developer! <br /></p>
<p>And hey - I already helped you on the web, <br /></p>
<p>why not let me help you <br /></p>
<p>build an amazing site! <br /></p>
</span>
And here is the CSS:
.noshow, p:hover .show { display: none }
p:hover .noshow { display: inline }
I'm not opposed to using JavaScript (coding suggestions welcome), but I'd prefer it to stay in CSS.
Thanks in advance!
You've got the right idea, sort of...
The goal is to have a container element which holds both sections of text.
When that element is moused over it gets assigned the pseudoclass :hover. Using this selector, you can re-style the children (below, .first and .second) appropriately.
Note that I've used <span> for the text and <p> for the parent below, but if you want to do this with block level children like more <p> elements, then you should use <div> as the parent instead.
http://jsfiddle.net/G28qz/
HTML:
<p class="hovertext">
<span class="first">This is what you see first</span>
<span class="second">But this shows up on mousehover</span>
</p>
CSS:
/* Hide the second piece of text by default */
p.hovertext .second {
display:none;
}
/* Hide the first piece of text on hover */
p.hovertext:hover .first {
display:none;
}
/* Re-show the second piece of text on hover */
p.hovertext:hover .second {
display:inline;
}
I think you want something like:
<div class="wrap">
<div class="show">
<p>if { </p>
<p>yourSite
< awesome; </p>
<p>solution = aislingDouglas (HTML5 + CSS3 + </p>
<p>JavaScript + PHP); </p>
<p>} </p>
<p>else { </p>
<p>solution = null; </p>
<p>} </p>
</div>
<div class="noshow">
<p>Need a website? </p>
<p>You found your dream developer! </p>
<p>And hey - I already helped you on the web, </p>
<p>why not let me help you </p>
<p>build an amazing site! </p>
</div>
</div>
with the following CSS:
.wrap {
outline: 1px dotted blue;
height: 300px;
}
.noshow, .wrap:hover .show {
display: none
}
.wrap:hover .noshow {
display: block
}
You need an outer container to wrap the two blocks that will be toggled on and off.
For best results, set a height to the outer wrapper or else you can get a oscillating show/hide effect since the panel will resize itself due to the different amount of text, which means that that the mouse may not be over the panel about to be displayed, so the hover state will be instantly reverted to not-hover, hence re-triggering the show/hide effect.
Fiddle: http://jsfiddle.net/audetwebdesign/zAt7f/
What I am trying to do is be able to have two columns in a div. So I can insert a picture at any point, and place text long side it neatly.
Here is my html:
<div id="content">
<div id="gallery">
<h1>Gallery</h1>
<div id="container">
<div id="imageleft">
<img src="images/pic1.jpg" width="150px" alt="Image" />
</div>
<div id="imageright">
test
</div>
</div>
<img src="images/pic2.jpg" width="150px" alt="Image" />
<img src="images/pic3.jpg" width="150px" alt="Image" />
<img src="images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>
Here is a perfect working JSFiddle
http://jsfiddle.net/RdyGM/1/
And here is an image of what I actually see. The purple bit should be 50% of left. (The text "test" is placed below).
upon inspection you can see that it is obtaining its width from else where :#
How to use just my desired css.
Well, there are two things you could do. The general approach is to try to make your CSS selector more specific. So you could do: #gallery #content #imageleft, instead of just #imageleft, and that should make your rule apply. The other approach is to change your CSS #imageleft to say:
#imageleft{
....
width:50% !important;
....
}
You can use !important to tell the browser which CSS to prioritise - it might, or might not help...
#imageleft {
float:left;
width:50% !important;
background:#c9c;
}
#imageright {
float:right;
width:50% !important;
background:#9c9;
}
domId.Attributes.Add("property of css", "Your css class name");