I might have overseen a really stupid mistake, but I can't find out why this doesn't work:
Here's my HTML, it's a simple menu, and if I hover "Home" or "Play" the font-color of the div "deco" changes to red...
<div class="menu">
<h1>
HOME PLAY LOGIN
<div id="deco">A</div>
</h1>
</div>
CSS:
body {
height:100%;
width:100%;
display: block;
background-color: #000;
overflow: hidden;
margin: 0;
padding:0;
}
.menu {
margin-top:10%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
h1 {
font-family: "Dauphin";
color: #FFFFFF;
}
a {
color: #FFF;
text-decoration: none;
}
a:hover #deco{
color: red;
}
#deco {
font-family: "Invader";
top: 123px;
color: #FFF;
width:100%;
height:100%;
text-align: center;
}
Your selector doesn't match the element. For a:hover #deco to work, the div has to live inside the anchor like so:
<a href="#">HOME
<div id="deco">A</div>
</a>
Modern browsers support the general sibling selector ~:
a:hover ~ #deco
If you need to support browsers that do not support the general sibling selector, you can achieve this with jQuery something like this:
$('a').hover(
function() { $('#deco').addClass('link-hover'); },
function() { $('#deco').removeClass('link-hover'); });
And define the CSS:
#deco.link-hover {
color: red;
}
This isn't working because #deco isn't a child element of the a tag.
The CSS declaration a:hover #deco refers to any element with ID 'deco' that is a child (e.g. contained inside of) an anchor element that is in the hover state.
For it to work you need #deco to be inside of the A tag, a child rather than a sibling element. Or you could leave the HTML as-is and accomplish this with simple jQuery instead (using .css or .addClass to change the style definition on hover).
Related
I have a link that has a strikethrough. I want to make the strikethrough lighter so the link text is easier to read, but can't figure out how to do it.
Here's what I want it to look like (using an inner span instead of a link because it comes out the way I want):
span.outer {
color: red;
text-decoration: line-through;
}
span.inner {
color: green;
}
<span class="outer">
<span class="inner">foo bar</span>
</span>
But this doesn't seem to work:
span.outer {
color: red;
text-decoration: line-through;
}
a.inner {
color: green;
}
<span class="outer">
foo bar
</span>
Any ideas?
Interesting that your first example works, I wouldn't have expected that… good to know, I guess!
You can achieve this appearance with a pseudo-element. Make sure the element is position:relative and then position the pseudo-element absolute, full-width, however tall you want the line to be, and top:[50% - half the height, rounded]. It'll look like this:
.fancy-strikethrough {
color: green;
position: relative; /* lets us position the `::after` relative to this element */
}
.fancy-strikethrough::after {
content: ''; /* pseudo-elements must always have a `content` */
position: absolute; /* lets us position it with respect to the `.fancy-strikethrough */
/* placement */
left: 0;
top: 50%;
/* make it a line */
height: 1px;
width: 100%;
background: red;
}
<a class="fancy-strikethrough">test</a>
You can even have the line extend a little on the sides by giving the element some horizontal padding.
There's a css3 property for this: text-decoration-color
So you can have text in one color and a text-decoration line-through (or underline etc.) - in a different color... without even needing an extra 'wrap' element
.inner {
color: green;
text-decoration: line-through;
-webkit-text-decoration-color: red;
text-decoration-color: red;
font-size: 24px;
}
green text with red strike-through in one element
Codepen demo
NB: Browser Support is limited... (caniuse)
...at the moment to Firefox and Safari (and Chrome - but you need to enable the "experimental Web Platform features" flag in chrome://flags)
Here you go you can also apply any 2 colors you want
a {
text-decoration: none;
}
.outer {
color:gray;
text-decoration:line-through;
}
.inner {
color: black;
text-decoration:underline;
}
<a href="#" >
<span class="outer">
<span class="inner">foo bar</span>
</span>
</a>
You can use border instead and set opacity to what you need:
#line-t {
color: green;
font-size: 20px;
position: relative;
display: inline-block;
}
#line-t span {
position: absolute;
width: 100%;
border-top: 2px solid red;
left: 0;
top: 50%;
opacity: 0.3;
}
<div id="line-t">
foo bar
<span></span>
</div>
here is the sample on codepen: http://codepen.io/startages/pen/wzapwV
Here you go:
<style>body {color: #000;}</style>
<del> facebook </del>
I'm trying to trigger a div from display:none; to display:block; when a link is hovered. I've tried to achieve the reaction through an adjacent sibling selector but the target div doesn't change from none to block. I think it's because I'm not defining the correct hierarchy, but I have no idea what else to try.
<div id="home_bar">
<div id="welcome_left">
I’m Anthony.
</div>
<div id="welcome_right">
<div id="name_desc">I love lamp.</div>
</div>
</div>
The above HTML is powered by the following CSS:
#home_bar {
display: table-row;
width: 888px;
border: 1px solid red;
margin-top: 80px;
}
#welcome_left {
letter-spacing: -1px;
font-size: 36pt;
line-height: 36pt;
width: 666px;
color: #606060;
cursor: default;
display: table-cell;
float: left;
}
#welcome_right {
float: right;
width: 200px;
display: table-cell;
position: relative;
}
#name:hover { color: #00A68D; cursor: default; }
#name_desc {
top: 50px;
position: absolute;
display: none;
}
#name:hover + #name_desc { display: block; }
I previously tried the following as the last line:
#home_bar > #name:hover + #name_desc { display: block; }
As that seemed like the right course of action based on this question, but I still can't achieve the desired affect (to be clear, the desired effect is: hover a link on the left, trigger the appearance of content on the right).
Any thoughts with regards to what I could be doing differently here? I'm hoping to avoid jQuery if I can as I'm normally a lot more comfortable working with CSS, but I'm completely stuck.
The adjacent sibling combinator has to be used with sibling elements. In this instance, #welcome_left and #welcome_right are the siblings. Therefore, when #welcome_left is hovered over, you will select the sibling #welcome_right's child element #name_desc.
EXAMPLE HERE
#welcome_left:hover + #welcome_right #name_desc {
display: block;
}
Unfortunately, you can't use the following, because #name and #welcome_right are not sibling elements. In CSS, you currently can't transverse the DOM, therefore there aren't any parent selectors.
#name:hover + #welcome_right #name_desc {
display: block; /* doesn't work because they aren't siblings .. */
}
so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO
I have the following CSS:
.top-category-item {
height: 338px;
background-color: black;
position: relative;
}
.top-category-item-copy {
width: 100%;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.8 opacity */
background: rgba(0, 0, 0, 0.8);
bottom: 0px;
position: absolute;
padding-left: 5px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 4px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
font-family: Georgia, Times New Roman, serif;
font-size: 35px;
line-height: 36px;
font-weight: bold;
color: #F1F1F1;
}
.top-category-item-copy a {
text-decoration: none;
}
And this is my HTML:
<a href="">
<div class="top-category-item low-gutter">
<img src="images/feature-placeholder.jpg" alt="latest-image-placeholder"/ width=100% height=100%>
<div class="top-category-item-copy">Earlier French Quarter curfew for youths gets mixed reaction.</div>
</div>
</a>
I've searched Stack Overflow for solutions to this problem:
Tried swapping the syntax around a little e.g. .class-name a:link {text-decoration: none;}
Tried declaring a global a {text-decoration: none;}, this works but it feels like a workaround, not a real solution
In your HTML, top-category-item-copy is a div, with an a as the parent. Your CSS is saying "No text decorations for all a tags within .top-category-item-copy."
I usually do this oldschool move when i want the behavior of links to be different from the text is uses
.top-category-item-copy:link { text-decoration: none; }
hope this helps
For the benefit of those who might still encounter this problem, i had this same issue where the a tag was parent to my custom div tag. I didnt want the whole anchor tags in my website to be altered so i had to use the parent div class for the block of anchor tags where i was altering. The arrangement would look something like this when viewed in html:
<div class="parent-div-class-for-this-block-containing-anchor-tags" "bla" "bla" "bla">
<maybe-other-div-classes-and-ids>
<a href="my-anchor-tag-which-i-want-to-alter" class="whatever">
<div class="my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above">
So my solution in the css was to use the parent div class, something like this:
.parent-div-class-for-this-block-containing-anchor-tags a {
text decoration: none;
}
instead of
.my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above a {
text-decoration: none;
}
This will alter the text-decoration of all anchor tags in this block, rather than try to use the anchor tags of the single anchor tags which is overridden by the "whatever" class. Hope this helps someone.
In CSS, is it possible that when I rollover one element, I make another element visible? I have an icon, and when someone mouses over it, I want it to make visible a text element that describes what the icon does.
Here's a CSS only tooltip I use all the time :) Works great, even in IE.
a:hover {
background:#ffffff;
text-decoration:none;
}
/*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy
<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>
Hope it helps.
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
span:hover + span {display: block; }
There are maybe some slight cross-browser compatibility issues, but with a valid doctype I think IE7+ is okay with sibling selectors (though I've not tried to test that theory).
sure it is!
.me:hover span { display: block; }
If you want to show an element that isn't a child of the element hovered you might need to use javascript
Here's a little slapped-together example that won't work on IE...
<html>
<head>
<style>
div.tooltip
{
margin-top: 16px;
margin-left: -1px;
position: absolute;
border: 1px solid black;
background-color: blue;
color: yellow;
display: none;
}
div.icon
{
width: 16px;
height: 16px;
border: 1px solid blue;
background-color: cyan;
}
div.icon:hover .tooltip
{
display: block;
}
</style>
</head>
<body>
<div class="icon">
<div class="tooltip">This is what the icon does.</div>
</div>
</body>
</html>
But you really should just use jQuery.
Agree with the JavaScript recommendation. Specifically jQuery is easy and most appropriate for page behavior logic. I think CSS should only be look/feel/style...Javascript should be were all your event and behavior logic is.