I am trying to make div element visible on focus but it is not working. If i change focus to hover it works
JSFIDDLE https://jsfiddle.net/9bo81jyy/8/
HTML
<div class="test">
<nav class="nav">
<ul class="navtabs">
<li>
<a href="showMe/1">
<div class= "inside">
<div tabindex="0" class="delete">
<button tabindex="-1" class="fa-times-circle"> </button>
</div>
</div>
</a>
</li>
</ul>
</nav>
</div>
CSS
.nav > ul.navtabs > li > a > div:focus .delete{
display: inline !important;
}
.delete{
display: none;
}
only a tag ll be focousable so use below code it'll work...i have updated the jsfiddle
.nav > ul.navtabs > li > a:focus .delete{
border: 1px solid red;
display: inline;
}
This <div tabindex="0" class="delete"> is not available in the DOM because of this CSS:
.delete{
display: none;
}
So that <div> can never be clicked on and can never receive focus.
Instead try focus on the <a> tag:
ul.navtabs a:focus .delete{
display: inline !important;
}
And remove the tabindex="0" on the <div>.
Related
hello i have this in vuejs
<ul class="new-list">
<div v-for="cat in catss">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
and i have this style
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child {
border:none;
}
but .sing-new:last-child overrid all items and remove border of all
how can i fix this
:last-child always confused, MDN explains it
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
In your example, what you want is the border of the last item in the list is none.
So, you should do this
.new-list > div:last-child .single-new {
border: none;
}
Every li you have is a last-child of an a tag.
try i like this
<ul class="new-list">
<div v-for="cat in catss" class="single-new">
<div>
<a :href="link(cat)">
<li>
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
.single-new li {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child li {
border:none;
}
You should remove all the div, a before the li. directly under an ul are supposed to be li.
You also should not put p (block) inside an a (inline). Use span instead.
Here is a link about the inline/block nature of html elements: Link
I guessed this is what you want
<ul class="new-list">
<div v-for="cat in catss" class="cat">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
CSS
.cat {
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
}
.cat:last-child {
.single-new {
border:none;
}
}
This question already has answers here:
Why changing visibility/display on focus does not work?
(4 answers)
Closed 4 years ago.
I can not get li:focus to show ul that is inside it.
Here is https://jsfiddle.net/cgxwzdy0/10/ with css display property
and the other one with visibility property https://jsfiddle.net/cgxwzdy0/12/.
<div id="menu">
<ul>
<li>
<a href="javascript: void(0)">
Lalalalal
</a>
<ul>
<li>
<span>Link 1</span>
<span>Link 2</span>
<span>Link 3</span>
</li>
</ul>
</li>
</ul>
</div>
Css:
#menu ul li > ul {
display: none;
}
#menu ul li li:focus > ul {
display: block !important;
}
Or with visibility:
Css
#menu ul li > ul {
visibility: hidden;
}
#menu ul li li:focus > ul {
visibility: visible !important;
}
Please no javascript solutions. And if this not possible with css, please can you explain why?
When i turn on Developer tools and choose :focus menu is shown. Take a look at image.
To be able to focus the element you need to consider tabindex attribute but there is another issue with the a element inside will block the focus effect.
Here is an example where you can focus when you click outside the text and not when clicking on the text:
#menu ul li > ul {
display: none;
}
#menu ul > li {
border:1px solid;
padding:10px;
}
#menu ul li:focus > ul {
display: block;
}
<div id="menu">
<ul>
<li tabindex="-1">
<a href="javascript: void(0)">
Lalalalal
</a>
<ul>
<li>
<span>Link 1</span>
<span>Link 2</span>
<span>Link 3</span>
</li>
</ul>
</li>
</ul>
</div>
The tabindex global attribute indicates if its element can be focused,
and if/where it participates in sequential keyboard navigation
(usually with the Tab key, hence the name).ref
To make it work with a element you can consider :target
#menu ul li > ul {
display: none;
}
#menu ul > li {
border:1px solid;
padding:10px;
}
#menu ul li #sub-menu:target {
display: block;
}
<div id="menu">
<ul>
<li>
<a href="#sub-menu">
Lalalalal
</a>
<ul id="sub-menu">
<li>
<span>Link 1</span>
<span>Link 2</span>
<span>Link 3</span>
</li>
</ul>
</li>
</ul>
</div>
The :target CSS pseudo-class represents a unique element (the target
element) with an id matching the URL's fragment.ref
Also a trick can be to use :active and :hover in combination with position absolute and relative.
So the menu does not fold back after clicking it but fold when the :hover is lost
#menu ul li {
position: relative;
}
#menu ul li ul {
position: absolute;
top: 0px;
left: 0px;
padding: 20px;
width: 100%;
height: 100%;
display: none;
visibility: hidden;
}
#menu ul li:active > ul{
display: block;
visibility: visible;
}
#menu ul li ul:hover {
display: block;
visibility: visible;
}
<div id="menu">
<ul>
<li tabindex="-1">
<a href="javascript: void(0)">
Lalalalal
</a>
<ul>
<li>
<span>Link 1</span>
<span>Link 2</span>
<span>Link 3</span>
</li>
</ul>
</li>
</ul>
</div>
see a demo here https://jsfiddle.net/cgxwzdy0/242/
This demo contains colors so you can see what is happening and why it works https://jsfiddle.net/cgxwzdy0/244/
Below is my code:
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
}
#sam_ul li {
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF';
}
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
The content pseudo element is displayed differently in both IE and mozilla. By different I mean in IE it is displaying correctly while in mozilla it is adding some extra padding and displaying the content.
check the difference between the first li element and the second li element.
Can anyone help me with this?
Add padding:0 to unordered list
#sam_ul{
padding:0
}
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF'; }
#u_l_sear:before {
content: '\0FBF'; }
<body>
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
</body>
Try to normalize everything. HTML and body has default margin and padding for every browser that could ruin your design. Almost all block elements has that.
Try:
html,body{
margin: 0;
padding:0;
}
Or download and add normalize.css
I need to change style if i hover on media-body checkbox should show up
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a>
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li><br/>
</ul>
</div>
Inline CSS has higher priority then outline, so you're changes are applied but are still overridden by your inline styles.
The simplest trick to make it work could be to set !important to your css.
.media-body ul:hover input[type="checkbox"] {
display: block !important;
}
JSFiddle: http://jsfiddle.net/WgQT5/
Anyway the right way would be to put inline styles outside of HTML.
Moreover your HTML is not valid. It should be
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li> <!-- </li> missing -->
<li><input style="float:right; display: none;" type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"/></li><!-- <br/> is invalid here and slash at the and of input was missing-->
</ul>
</div>
Your problem is that the inline style float: right; display: none; has higher priority than the style defined in CSS.
I would suggest to add a default style in CSS equivalent to the inline one and then override this one:
CSS:
.media-body ul input[type="checkbox"] {
float: right;
display: none;
}
.media-body ul:hover input[type="checkbox"] {
display: block;
}
HTML:
<div class="media-body">
<ul>
<li><a style="float:left;">{{inventory.manufacturer}} {{inventory.model}}</a></li>
<li><input type="checkbox" ng-model="inventory.checked" ng-checked="inventory.checked"></li>
</ul>
</div>
Only add !important and greater than selector
.media-body ul:hover > li input[type="checkbox"] {
display: block !important;
}
LIve code
Here is my html
<div class="pure-u" id="menu" data-ng-controller="gotoUrl">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading"
href="#">PennyTracker</a>
<ul>
<!-- Add Transaction Button -->
<li>
<button
class="pure-button pure-button-success pure-button-large"
data-ng-click="setRoute('new')">
<i class="icon-plus"></i>
Transaction
</button>
</li>
......
</div>
and here is the css I try to change the color when hover on li
.pure-menu li.hover {
background: red;
color: #000000;
}
But I see no red color when I hover, I see
What is that I am doing wrong?
You must put : instead of . ,hover is not a class.
.pure-menu li:hover {
background: red;
color: #000000;
}