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/
Related
The CSS worked perfectly fine with the old HTML, but i have to change to the new HTML (nested checkbox.
I cannot figure out how to change my CSS to make that happen.
/*Old CSS:*/
.cl1 .clChk:checked ~ .cl2 {
opacity: 1;
height: auto;
}
<!--OLD HTML-->
<div class="cl1">
<label class="clLabel" for="chk_1">some text</label>
<input class="clChk" type="checkbox" id="chk_1">
<article class="cl2">
..some text..
</article>
</div>
<!--NEW HTML-->
<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox">Some text</label>
<article class="cl2">
..some text..
</article>
</div
I have tried many variations, but i cannot seem to get it to work; so if the checkbox isn't nested in the label, there is no issue, but i need the checkbox nested in the .
Thank you so much for your help!
deduijk! You miss the dot at the begning on cl1Chk element.
.cl1 clChk:checked {
}
to
.cl1 .clChk:checked
How can I select all a elements inside a p element that have a specific class name?
<div>
<p class="myClass">
This is
<div>
random
</div>
</p>
</div>
Remove the div inside the p tag:
<div>
<p class="myClass">
random
</p>
</div>
Then if you want to select all the a tags inside a p tag which you gave a class. You can do the following:
.myClass a {
}
May be you aren't able to target anchor tag(s) due to that div. Do you need that div before the anchor tag? Please refer to the code snippet below:
.myClass a {
color: green;
}
<div>
<p class="myClass">
This is
random
</p>
</div>
div *[href]
{
// css rules...
}
<div>
<p class="myClass"> This is
<div>
random
</div>
</p>
</div>
you can give a specific class name to a and call it like:
<a class="myA's" href="#">random</a>
CSS
a.myA's{
#do something
}
And in your case it should be:
.myClass > a{
#doSmthg
}
<p> can only contain inline elements,See here.
so,remove div inside p:
p.myClass a {
color: red;
}
<div>
<p class="myClass">
This is<br>
random
</p>
</div>
You need to change the <p> to <div> then use this
.myClass > div a { ... }`
or remove <div> inside the <p> and try this
p.myClass a { ... }
Here is my code
<div>
<p>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
I want is to show image next to my <p> tag and not below it. Please anyone help me to resolve this
Making the p tag, which is defaulted to "block" an "inline-block" element, will let other elements flow along after it. It's best to add these rules in an external stylesheet, but for illustration:
<div>
<p style="inline-block; margin-right: 5px;>hello nirmesh</p>
<span><img src="x.png"/></span>
</div>
Set the display of the p tag to inline.
p {
display: inline;
}
<div>
<p>hello nirmesh</p>
<img src="x.png"/>
</div>
<div>
<p style="display:inline-block;>hello nirmesh</p>
<span> <img src="x.png"/></span>
</div>
I am learning Selectors and not.
What I am trying is to PUT the text of the span in color red BUT NOT the text of the link, combining both. It is just to learn.
My HTML code
<div>1
<p>2
<span>Here red
<a>Here NOT red
</a>
</span>
<div>3
</div>
</p>
</div>
What I am trying to do with CSS
div p span:not(:nth-child(0)) {
color: red;
}
/* Or */
div p span:not(a) {
color: red;
}
Anyone can help me? I do not want to set another rule for A. It is just to learn as I said.
Thanks!
There were a couple of issues with your page. One is that you had an extra div closing tag. Second, the a tag defines a hyperlink, so it should have an href attribute. Your a tag had no attributes.
Take a look at this snippet
span:not(a) {
color: red;
}
<div>1
<p>2
<span>Here red
Here NOT red
</span>
</div>
</p>
</div>
Alternatively, you could just close the span tag before the a tag, and then just select the span element.
I want to style the following CSS classes; is there any short styling technique for this?
.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */
I am looking for something like:
.test-%d% { }
I want to dynamically create many test-* classes with different numbers and common styles.
Update
here is my actual situation
<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
<div style="clear: both;"></div>
</div>
</div>
When user click the above button then same structure will clone and append to the end of the form
so the form will be as
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
</div>
<div id="form_container-1">
<div class="placeholder">Add your form fields here</div>
</div>
</div>
the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.
also it would be great if you share optimised code for cloning the structure with
different ID.
Please do let me know if you still have doubt.
thanks
You can use an attribute selector.
div[class*='test-'] {...}
I think #Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/
css
.test-1,
.test-2,
.test-3,
.test-4,
.test-5{
color:#F60;
display:block;
}
.test-5{
color:blue
}
html
<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>
span five will be in blue color... so you can override the class you want to test and play with it.
Also you can use selectors like
HTML
<div>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span class="test-1">I'm red</span>
</div>
CSS
div > span{
color:pink;
display:block;
}
div > span.test-1{
color:red;
}
and the last span will be red. I hope this help.
My two cents...