Modify parent element style - html

My blog simulates a terminal screen, so normal text is green and links are in red with a red background when the mouse is over. Since I use a monospaced font throughout the blog, <code> is styled to have a green background to differentiate from regular text. Likewise, <code> inside <a> has a red background that turns darker when the mouse is over. See this test page for a live version.
Here is the CSS (complete file here) for <a> tags:
a {
color:#CD0000;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a:hover {
background-color:#440000;
}
And for <code> tags inside <a> tags:
a code {
/* Only apply this to code that is a hyperlink */
color: #161616;
background-color: #CD0000;
border-radius: 5px;
padding: 0 2px 0px 2px;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a code:hover {
background-color:#440000;
border-radius: 5px;
padding: 0 2px 0px 2px;
}
The problem is that when I mouse over a link such as <a href='#'><code>long code</code></a>, the backgrounds of both the <code> and the <a> tags are transformed. Here are two images that illustrate this. In the first image, I managed to put the pointer of the mouse only over the <a> element. In the second, the mouse is over the <code> element:
Is there a way to style <code> links differently from normal links? Thank you in advance.

I think you're looking for the contains() selector, which is no longer part of the css3 selector spec
To achieve this, you will want to look at either a js framework solution, like has() in jquery or a dynamic css solution, such as less

Related

CSS Transitions: order of firing when multiple transitions

demo
HTML
<span>text insie span</span> |||| text inside anchor
SASS
span {
transition: all 500ms ease;
}
a {
transition: all 5000ms ease;
&:hover {
color: red;
}
}
When hover, first 5000ms transition is fired on <a> ignoring <span>.
After it finished, fires 500ms transition on <span>
Why it happens? Shouldn't they start simultaneously? Why <a> delays <span>'s transition by its own duration?
Since the span doesn't have a :hover rule of its own, the browsers handles this different.
Chrome simply picks up the anchor's, but in Firefox it actually runs the span's first and then the anchor's override it.
I can't say which one is correct here, as there is both a property inheritance involved and to not be able to animate the same property on an element with to different rules.
If you add a :hover rule to the span, you'll see it work as expected
Note, you need to hover the span or else nothing happens with its transition
Stack snippet
span {
color: pink;
transition: all 500ms ease;
}
span:hover {
color: lime;
}
a {
transition: all 500ms ease;
}
a:hover {
color: red;
}
<span>text inside span</span> |||| text inside anchor

Transform Scale doesn't work on elements nested in buttons

I'm applying transform:scale to the :hover event for an <img> element nested within a <button> control.
It works in Chrome, but not in Firefox or IE.
Here's the code (below). Is there a way to make it work in Firefox and IE?
I'd like to keep the effect on the hover event for the nested <img> file, but I can put it on the <button> if needed. I'm really just curious if this code can be made to work on FF & IE or if it's a known limitation with those browsers (or non-standard awesomeness allowed by Chrome).
.zoomable {
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
border: 1px transparent solid;
}
.zoomable:hover {
border: 1px orange solid;
transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
}
<button>
<img src="bogus.png" class="zoomable" />
</button>
You should set :hover on a button and keep everything like it is. Just as you said. If you use element that doesn't include interaction like div or span you can leave .zoomable:hover and it will work. It is a button issue since it brings it's native interaction and probably collides with child element hover event.

Why is this CSS transition not working as intended? [duplicate]

This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Closed 7 years ago.
I have a submit button in a form and I'm trying to make a simple on-hover transition. I want it to Swap the colors of the button's text and the button's background color. The way I have it right now, the text successfully transitions over time, but the background color is still switching colors instantly. How do I fix this to make the background color also change over time? I am using Google Chrome, so I only put in the -webkit-transition. Once I get this working I'll add the others for other browsers.
Here's my simplified code:
<form method="post" action="processRegistration.php">
<input class="submitbutton" type="submit" name="submit" value="Create Account" />
<form>
CSS:
#signupform
form
.submitbutton {
margin: 0 auto;
border-radius: 5px;
border: solid 2px #66cc66;
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
background-color: white;
color: #66cc66;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
http://jsfiddle.net/ewkruuk3/
This is because you are declaring the transition twice. You are basically overriding the first transition with the second one. In CSS if there are two of the same rules, the last one applies. You have to seperate both by a comma in one declaration.
transtion: color .5s, background-color 1s;
Ideally though your css can be simplified to the following:
.submitbutton {
// Other rules
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s, color 0.5s;
transition: background-color 1s, color 0.5s; // Include this for browser compatability
&:hover {
background-color: white;
color: #66cc66;
}
}
You don't need a transition on :hover as the transition in the parent rule will also apply.

What is causing this CSS Transition delay, specifically with colours in Chrome?

Using CSS transitions on most properties runs as expected, except this issue I am having with colours.
I have set up a demonstration pen here.
When transitions are instructed to change the color property, they all queue after each other instead of happening all at once.
This seems limited to webkit as IE and Firefox work as expected.
#change {
color: green;
transition: color 200ms linear;
}
.changed {
color: red;
}
I think it's because color is inherited property, and you use * selector for transition. You should set transition: color only to element you change color, for example (http://codepen.io/sergdenisov/pen/QbjjjP):
#container {
padding: 0;
transition: color 500ms;
}
#container * {
transition: margin 500ms;
}

Fix gradual :hover glow in Firefox

I have some css that gradually changes the background colour of an element when hovered on and the links below it.
It works perfect in Chrome and IE9+ but in FF it only works on the element you hover on and it instead immediately changes the colour on the elements below
EXAMPLE
I'm guessing the problem lies somewhere here:
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
What do I need to change/add to get it to work properly in FF
Try setting the same transition on the element(s) below as well.
I'm guessing you want the lines in your example to have the same effect. I've updated the example with this JsFiddle.
Edit:
I added the transition CSS to all classes that handles the border you use to draw the lines
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;