I am building a my first site. A big part of the specifications is that it should be very user friendly.
I have a a few images at the top of my home page that have hyperlinks attached. They have a grey border that is changed to pink when hovering over the image.
The problem I have is that I can tab my was to the images and hitting return results in the link being opened so that is fine but I the border does not change colour when I have tabbed to it, so it is difficult if not impossible to know what image you are currently tabbed to.
Border code:
<style>
IMG.HoverBorder {border:1px solid #eee;}
IMG.HoverBorder:hover {border:1px solid #FC359A;}
</style>
The :focus pseudo-class matches elements that have focus, but an img element normally does not have (and need not have) focus. But an a element that constitutes a link is focusable, so you need to use a selector that matches an img element that a child of a focused element. Example (using a 3px thick border just for clarity):
IMG.HoverBorder { border: 3px solid #eee; }
IMG.HoverBorder:hover { border: 3px solid #FC359A; }
a:focus IMG.HoverBorder {border-color: green;}
img { vertical-align: bottom; } /* to make border sit tight around */
<input placeholder="Click here and press TAB">
<img class=HoverBorder src="http://lorempixel.com/100/50" alt=dummy1>
<img class=HoverBorder src="http://lorempixel.com/100/100" alt=dummy2>
Related
If you run the following demo, and click+hold(hold for 1sec before releasing the click) on the third link, you will see they get the same styles of :focus pseudo selector from the css(red outline).
.ext:focus {
outline: 1px dotted red;
}
1. Get me in focus with tab to see black outline -- Browser default
<br><br>
<a class="ext" href="#">2. Get me in focus with tab to see red outline -- ext css </a>
<br><br>
<a class="ext" href="#">3. Click+hold to see red outline -- supposody gets me in focus </a>
<br><br>
4. Click+hold to see black outline -- doesnt work as expected!
My gut feeling is that when you click+hold on any focusable element, it gets that element in focus, thats why you see a red dotted outline on #3 link.
Now, then why in the fourth link when you click+hold you don't see a black outline?
It is true that when you click on a focusable element it gets infocus as well, but your misconception is that the browsers internally apply the following css:
a:focus {
outline: 2px solid black;
}
In reality the browsers use the focus-visible css property like this:
a:focus-visible {
outline: 2px solid black;
}
focus-visible is a css4 level property recently introduced by most browsers(except safari). It has been designed specifically for what have you observed. This behaviour gets even more apparent in case of input fields(check out MDN's example), where you don't have to hold the click to see the result. In the case of anchor tags focus-visible applies style to only those elements who've been focused through the keyboard not the mouse. It should be noted that the button element behaves similar to a element, but the input element treats focus-visible identical to focus, that is even on click it gets the styles mention in input:focus-visible{...}.
Example:
input:focus-visible, button:focus-visible {
outline: 2px dotted black;
}
<input type="text" value="Click/tab shows outline">
<button>Only tab shows outline</button>
Moreover, you can inspect element in your browser and toggle element's state to focus-visible. You will see the following styles being applied by the user-agent(chrome):
a:-webkit-any-link:focus-visible {
outline-offset: 1px;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
user agent stylesheet
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
The link color and design have set for all links but he links inside the div is not showing any changes.
I want to design the excerpt link opposite to the admin operation links. Means background color and white text. But here the background color is working no effect on text color. I have made it appear in the white text but nothing happened.
I can change the color using a class but it does not change with class a:link
Also, hover does not work.
HTML
<div class="entry-content">
<p>The standard Lorem Ipsum passage...<a class="more" href="#">Read the full article</a></p>
<span class="cat-links">Posted in Design</span><span class="comments-link">Leave a Comment<span class="screen-reader-text"> on Lorem copied</span></span><span class="edit-link"><a class="post-edit-link" href="#">Edit <span class="screen-reader-text">Lorem copied</span></a></span>
</div>
CSS
.entry-content a.more:link {
padding: 0px 5px;
border-radius: 5px;
border: 1px solid #17a2b8;
background-color: #17a2b8;
color: #ffffff;
}
How to use the class for link color, background color and change on hovering it...?
If I'm understanding correctly:
.entry-content p {
/*whatever color you need for paragraph text*/
color: #000000
}
.entry-content a:hover {
/* whatever color you need for link hover */
color: #ffffff;
}
You can of course do the same calling the span classes individually if you need different colors or hovers for each link. Don't forget to keep in mind the order of precedence.
I am trying to make an element that allows a user to select an area and that in turn selects a radio button (hidden). The problem is that areas that are selectable need to be triangles, as a result I have used the following code, to create a downward pointing triangle,
width: 0;
height: 0;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
position:absolute;
top:-1px;
right:1px;
border-top: 26px solid green;
My problem is now that it will not do any of the hover behaviour or :checked behaviour, I assuming that this is becase the element theoretically has no dimensions? Is there a work around for this? Basically what I want to happen is when the triangle is hovered it turns grey, when it is clicked it turns yellow and the sibling radio is checked. Here is my fiddle, I have the center (circle working).
http://jsfiddle.net/bfehyv2a/1/
try http://jsfiddle.net/bfehyv2a/4/
You will see a :hover still works as the pointer is considered to be over the element when it is on the elements border.
.green .long:hover {
border-top-color: #888;
}
Also, notice that border-top-color is used as this is the only border you are setting a colour on to create your triangle.
As for :checked status, this only applies to the radio button itself and as the triangles are not within this you won't be able to use this to set there colour. You will have to use JavaScript to set state classes, which is what you should really be doing anyway as it is a better separation of concerns.
I'm trying to recreate something like the chrome developer tools element inspector, wherein I can get the element that's currently being hovered.
I want to add a hover effect to every element on the page sort of like this:
:hover {
border: 1px solid blue !important;
}
But the problem is that it'll show me every single parent element up until that point since they are also being hovered.
:hover {
border: 1px solid blue !important;
}
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>
Since there is no parent selector, I can't check to omit elements that have children that have the :hover property.
I can't use :last-child as the lowest level element may be a grandchild.
Any ways to style just the child-most element being hovered?
Found a solution using jQuery'smouseenter/mouseleave:
$("*")
.mouseenter(function(){
$(this).addClass("hovered");
$(this).parents(".hovered").removeClass("hovered");
})
.mouseleave(function(){
$(this).removeClass("hovered");
$(this).closest(":hover").addClass("hovered");
});
.hovered {
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>
On Google chrome, if I have a div within an anchor, randomly the border will change to the text colour. If I inspect the element, the colour switches back instantly to the proper colour. Is there a way I can get around this error?
This is the html: (it doesn't happen every time, spontaneously it will be the wrong colour)
<a href="/about"><div class="navc">
<div class="navt"><?php echo $lang['0']; ?></div>
</div>
</a>
this is the css:
#nav
{
float:left;
width:100%;
height:30px;
background:url('../images/nav.png') repeat-x;
border:1px solid #C2C1C1;
text-shadow:0 1px 0 white
}
#nav a
{
color:black;
text-decoration:none
}
.navc
{
padding:0 10px;
border-left:1px solid #C2C1C1;
border-right:1px solid #EEE;
float:left;
height:100%
}
.navt
{
padding-top:6px
}
As can be seen on the following image,the border of the About navigation button is wrong
Only took me 3 hours to solve this bug (on days like this I feel like Webkit is just as bad as Trident)... but here's the answer:
It only occurs when you have an inline elements inside an anchor (<a>) with a "href" value that has been visited. Such as:
<span>Button</span>
To fix the issue, I added the following CSS:
a {color: blue}
a span,
a:visited span /* Webkit will render a blue border unless this is explicitly specified */
{
border: 1px solid red;
}
I found a solution,
if I use a span instead of a div, the issue doesnt seem to occur.
edit - it occurred once since its been a span, refreshed and it hasn't occurred since.
I just ran into this with some markup like this:
<a href="http://www.google.com" class="outer-link">
<img src="http://google.com/gif.png" />
</a>
My styles looked like this:
img { border: 2px solid gray; }
The gray border was getting turned into the blue link color, here is how I fixed it:
.outer-link { color: gray; }
So even when the img is getting the wrong border, it's defaulting to the gray border color that I specified. I know it's a bit hacky but it works.