There is fiddle with my problem.
As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. But I can't come up with solution.
I think it's very common problem, but I didn't found any information about this.
Thanks for any help.
CSS:
#search:focus + #results {
display: block;
}
#results {
display: none;
}
HTML:
<input id="search" type="text"/>
<ul id="results">
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
Just add a hover method to #results:
#results:hover{display:block;}
http://jsfiddle.net/gc6L323f/3/
I would suggest in your case to include also :hover pseudo class and make the #results object visible on hover.
Like this :
#results:hover {
display: block;
}
You can check working demo.
Related
I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp
<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>
.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}
Please see below:
<span class="caption">
{block:Caption}<p>{Caption}</p><hr>{/block:Caption}
</span>
The Caption block will contain text, part of which is a link. How do I create CSS that will underline the link within the "caption" span only?
First of all - you can't have inline element around block element.
Than just do a{text-decoration: none;} .caption a{text-decoration: underline}
there is also the :not() selector to filter tags to select:
example with links and valid HTML:
li:not(.nop) a {
text-decoration:none;
}
<nav>
<ul>
<li>Lorem</li>
<li class="nop">Do not touch my underline defaut </li>
<li>Morbi</li>
<li>Praesent</li>
<li>Pellentesque</li>
</ul>
</nav>
Try jQuery:
$(document).find('span.caption').each(function(){
$(this).css('text-decoration','underline');
})
Fiddle here: https://jsfiddle.net/qq4j5uz2/
If i understand correctly it would be something like this:
.caption a{
text-decoration: underline;
}
I need to make a website for school. I try to use the Checkbox Hack. It works in general, but i cant implement it in my website. Here is my problem: input[type=checkbox]:checked > .menuitem doesn't seem to effect the folowing:
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li>
<li class="menuitem">About us</li>
</ul>
</nav>
I tried replacing my "> .menuitem" in input[type=checkbox]:checked > .menuitem with various things like ~ and ~ nav>ul>li But i dont have any succes. Does anybody have an idea what i need to do?
i'm looking for a effect that does this:
If (checkbox is checked) {
Hide a part of the webpage
}
On another note: I am not allowed to use anything else then HTML and CSS (So no Javascript or php etc.)
try this
input[type=checkbox]:checked + nav .menuitem
input[type=checkbox]:checked + nav .menuitem{
display:none;
}
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li>
<li class="menuitem">About us</li>
</ul>
</nav>
The > css selector is immediate child selector, so browser search only for the first children of input tag - in this case nav element.
All you need is:
input[type=checkbox]:checked .menuitem
Eventually you can add additional tags to be more specific
input[type=checkbox]:checked nav .menuitem
Or
input[type=checkbox]:checked nav ul li.menuitem
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
My question is: It is possible to achieve this example using only css? If not what would you do? Jsfiddle examples are really appreciated ;)
How to obtain also the slashes? Should i use an image or in css is possible? And the triangle that change when is clicked? I know it is possible to do it with Js maybe in css :after and :before would help me?
PS: Javascript to Hide Menu:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleMenu");
var text = document.getElementById("displayMenu");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Menu";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
<div class="menu-toggle"><div id="wrap"><a id="displayMenu" href="javascript:toggle();">Menu</a></div></div>
<div id="toggleMenu" style="display: none">
<div class="menu">
<ul><li> Home </li>
<li> Item </li>
</ul>
</div>
</div>
Usually I do something like this with images to achieve the click event with just css
<figure>
<img id="zoom" src="http://cargowire.net/Content/images/events/stackoverflow.jpg" alt="EE" />
<figcaption>
<ul>
<li>
Zoom In
</li>
<li>
Zoom Out
</li>
</ul>
</figcaption>
</figure>
and CSS:
figure { background: #e3e3e3; display: block; float: left;}
#zoom {
width: 0px;
-webkit-transition: width 1s;
}
#zoom:target {
width: 400px;
}
Check here: http://jsfiddle.net/dCTeW/ Maybe something similar can be done for menus too
It is perfectly possible, but only when the mouse hovers, not on click as far as I am aware. You will want to use CSS :hover states.
There is an in depth article here: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
and the demo for that article here: http://csswizardry.com/demos/css-dropdown/
If you want to use click then a small bit of jquery may help you something like:
$('.menu-item').click(function(){
$(this).find('hover-div').toggle()
})
http://api.jquery.com/toggle/
that is the Documentation for toggle which is what you need to achieve.
If you insist on using click in stead of hover, you could try to use :focus as suggested, but it would actually be a hack, and not considered correct use of HTML and css. Just for demonstration though, have a look at this: http://jsfiddle.net/9efMt/1/
As you can see, I use an input, with the :focus pseudo class and the + sibling selector. Nothing really wrong with that css, but putting the menu in an input is just not done!
I used jquery for the js in the, imo, correct example that is in the same fiddle. All i do is toggling a class when the menu link is clicked. It looks like this:
$('#menu2').click(function() {
$('#menu2-sub').toggleClass('active');
});
The css should be fairly straight forward.