So below is my code. The "active" command in the css block works since when clicking on the div it changes color but when letting go of the click its border should become red as stated in the "target" command in the css block but it doesn't. Ideas?
<html>
<body>
<style type="text/css">
.svar-grid {
margin: 20px;
}
.svar-grid .svar {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
.svar-grid .svar:active {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:green;
}
.svar-grid .svar:target {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid red;
border-radius:10px;
background:green;
}
</style>
<html>
<div>
<div class="svar-grid">
<div class="svar"><h4>Testing</h4></div>
</div>
</div>
:target applies to elements with an id attribute which matches the string that appears after the first # character in the URL. This is that that when you link to something specific on a page, it can be highlighted to draw the eye to it.
Since the element doesn't have an id, the :target pseudo-class cannot apply.
:focus applies to elements that have the focus. Clicking on an element will, generally, give it the focus … but only if the element is focusable in the first place.
The point of the focus is so that when interacting with a user interface without using a pointing device (e.g. a mouse, trackpad or touchscreen) you can move between interactive controls via some other mechanism (e.g. pressing the tab key). Then you can trigger (e.g. by pressing Enter) the focused element.
This is only useful if the element does something when triggered (e.g. if it is a link or a button). A div doesn't, by default, do anything when triggered. It is a generic container.
You can add interactivity to an element with JavaScript (addEventListener) and you can mark the element as being interactive by using the tabindex attribute … but you should usually pick a different element (like <button>) instead.
You are looking for :focus.
https://jsfiddle.net/s0L716zu/
HTML
<div class="svar-grid">
<div class="svar" tabindex="-1"><h4>Testing</h4></div>
</div>
CSS
.svar-grid .svar:focus { .... }
As you can see I added tabindex="-1" to the div because a div is not naturally focusable. Giving it -1 tabinde makes is focusable
Here is what :target is supposed to do https://developer.mozilla.org/en-US/docs/Web/CSS/:target, It is meant to be used with the URL
I am not sure why you need focus on the div or if there is any interaction with it. But if there are interaction with the div, you should probably use button or an anchor tag depending on its usage
Related
I have a <button> element and within it, a <p> element. The <p> element is used in combination with css, margin-top, in a class to vertical align the text within the button (the button has a specific height).
The html looks like this:
<button class="someClass">
<img ... />
<p class="anotherClass">Caption</p>
</button>
This works fine, the text is vertically aligned like it should be. However I get a warning inside visual studio 2012 saying:
Element 'p' cannot be nested inside element 'button'.
My questions: why isn't the <p> element allowed inside a <button> element? And what is the alternative?
That is correct, it isn't allowed, because;
The content model of button element is phrasing content (with no interactive content descendant).
And the p can only be used where flow content is expected.
An alternative is getting rid of the p element, and instead using a span element with display: block:
.anotherClass {
display: block;
}
<button class="someClass">
<img ... />
<span class="anotherClass">Caption</span>
</button>
Generally you're not supposed to put block elements inside of inline elements.
Visual Studio is correct in this issue: no HTML specification allows p in button, not even the rather liberal definition in HTML5 CR.
However, browsers do not actually enforce this restriction (in the sense that they enforce e.g. the restriction that span cannot contain p: they implicitly close an open span element when they see a <p> tag). So your code “works”, though there is really no guarantee that it will keep working (or that it works on all browsers).
To make the code formally valid, replace the p element by a span element and style it. You might also put a <br /> tag before it, to ensure a line break even when CSS is disabled. To set a top margin on it, make it a block or an inline block. Example:
.anotherClass {
display: block;
margin-top: 1em;
}
<button class="someClass">
<img src="http://lorempixel.com/100/50" alt="Some text" /><br />
<span class="anotherClass">Caption</span>
</button>
Since the P and some other tags cannot be used within the BUTTON tag, the best workaround, as others have stated, is to use a styled SPAN tag.
Basically you treat the BUTTON tag "as if" it was a container DIV of your SPAN tags within. That way you can style your whole button however you want. In my example I styled it with a simulated icon, simulated title tag, simulated description and simulated button within the button.
I'm adding a little extra styling and formatting for visual purposes, but yours can be as simple or complex as you want it to be.
STYLE:
/* CSS Styling and classes example */
/* style the main container */
button {
background-color:transparent;
outline:none;
border:none;
cursor:pointer;
transition:0.2s;
padding:10px 15px;
}
/* what happens when you hover - optional */
button:hover { background-color:#efefef; }
/* what happens when it's active - optional */
button.active { background-color:#ccc; }
/* global style for the contained span tags within */
button span {
display:block;
margin:5px auto 10px;
}
/* individually styling the inner span tags by class identifiers */
button span.step {
background:#c33;
color:#fff;
padding:10px 2px 0 0;
font-size:1.75em;
font-weight:600;
width:40px;
height:40px;
border-radius:20px;
}
button span.title { font-size:2em; font-weight:600; }
button span.desc { font-size:1.05em; }
button span.btn {
margin:20px auto;
padding:5px 10px;
background:#c33;
color:#fff;
}
HTML:
<!-- html code -->
<button class="customClass">
<span class="step">1</span>
<span class="title">Title</span>
<span class="desc">My cool button description</span>
<span class="btn">Click Here</span>
</button>
Of course, you can modify, add and remove span elements as you see fit, including images.
I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
I am trying to change the image buttons which is when selected by the user on navigation menu ie: When user hover it will change the button colour (I can do this OK) and the button effect will remain until the user selected the button (This I cannot do).
I try to use "current" or "select" element but it didn't work. Any suggestion?
I also wondering in term of building a navigation menu is it better to use "div" tag or would it be better "li" tag?
So far the HTML looks like this:
<body>
<div class="menuBar">
<div class="home"> </div>
<div class="about"> </div>
<div class="link"> </div>
<div class="contact"> </div>
</div>
<body>
And my CSS is:
#menuBar {
width:525px;
}
.home {
float: left;
margin-top: 0;
}
.home a {
background:
url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
display: block;
height: 50px;
margin-left: 5px;
margin-right: 5px;
width: 180px;
}
.home a:hover {
background:
url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
}
.about{
float: left;
margin-top: 0;
}
.about a {
background:
url("http://s20.postimg.org/eb5va917d/Gray_Nav_Over_02.jpg")
no-repeat scroll 0 0 transparent;
display: block;
height: 50px;
margin-left: 5px;
margin-right: 5px;
width: 180px;
}
.about a:hover {
background:
url("http://s20.postimg.org/h6iyh457d/Nav_Over_02.jpg")
no-repeat scroll 0 0 transparent;
}
See fiddle.
EDITED: I have seen some people done it in JavaScript but I'd like to see it done in CSS preferably (Although you can show me other alternative in JQuery or other way)
Focus
element:focus is the pseudo class (.css selector) you are looking for.
Study here for more details : 6.6.1.2. The user action pseudo-classes :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to
user actions. Selectors provides three pseudo-classes for the
selection of an element the user is acting on.
The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it.
For example, a visual user agent could apply this pseudo-class when
the cursor (mouse pointer) hovers over a box generated by the element.
User agents not that do not support interactive media do not have to
support this pseudo-class. Some conforming user agents that support
interactive media may not be able to support this pseudo-class (e.g.,
a pen device that does not detect hovering).
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses
the mouse button and releases it. On systems with more than one mouse
button, :active applies only to the primary or primary activation
button (typically the "left" mouse button), and any aliases thereof.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
Try this css :
.about a:active,.about a:focus {
background: url("path to your active-focus image") no-repeat scroll 0 0 transparent;
}
Here, i updated your jsFiddle so you get a live example.
First of all it's good have have LI as to it's like conforming to patterns in code.
Also it's recommended by W3C and that's how they build their samples: http://www.w3.org/wiki/Creating_multiple_pages_with_navigation_menus
As for code specific issue. You need to create active class in the CSS and have it added to you link onClick event:
CSS
.activeState {
background:url("http://s20.postimg.org/h6iyh457d/Nav_Over_01.jpg")
no-repeat scroll 0 0 transparent;
}
If the site structure is all static then when you land on Home.php, set the class for Home link to activeState. Similarly, when you land on other pages (say for example on
the About page) assign activeState class to About link.
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.
You can affect a sibling element using CSS2.1 selectors, like so:
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
<p>Cheetah <span class="sibling">Blah Blah Blah</span></p>
Notice that the a and the span are direct siblings.
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
Or, if you're open to it, use jQuery.
Something like this would work:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
.button:hover ~ .tooltip {
display: block;
}
How Would I make it so that when I click a button, the button stays that color until another button is clicked?
To clarify, imagine you have a text box. When you click it, you can add a border because you have it like input:focus{border:#000} and when the input loses focus or another text box is clicked, the border properties go back to the default.
How would I accomplish this with a button. I feel like I'd need to use :after or something.
My Code
button.top_bar {
background-color:#E3E3E3;
border:#DCDCDC 1px solid;
border-radius:3px;
height:40px;
display:block;
color:#000;
postion:relative;
display:block;
float:left;
top:5;
text-transform:capitalize;
font-family:Arial;
font-weight:bold;
cursor:pointer;
margin-left:15px;
}
button.top_bar:hover {
border:#9F9F9F 1px solid;
}
button.top_bar:focus {
border:#9F9F9F 1px solid;
}
The only way I can think of doing this is with jQuery, or some sort of Javascript. Here's how I would do it: I would control it via a class (let's call it ".selectedBorder"). Then on click, grab all your buttons that you have, and turn off the borders for all of them, then just add it on the clicked one. Here's an example:
//first you grab the click event for the button(s)
$("#buttons").click(function(){
//we remove all the borders from all the buttons
$("#buttons").removeClass("selectedBorder");
//Now we add the border to the button that's been clicked
$(this).addClass("selectedBorder");
});
That should do the trick. Just add that in a javascript tag or an external file and include it, and you should be good to go. Hope that helps.
Unlike text inputs, some browsers don't seem to grant focus when button elements are clicked. Add to your button element an attribute onclick="this.focus()" to force the issue. No jQuery needed :-)