I've been having trouble making it so the links I have (which are nested in list elements) rotate when they're hovered over. I've been doing this:
li:hover {
color: #ff0000;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
I know the CSS is being applied, because the color changes. I know my syntax is correct, because when I tried the same thing, substituting nav for li, it worked. Is there a reason this won't work with lis in particular for some reason?
You could try changing the li selectors in your css to link selectors, then add
display:inline-block;
see http://jsfiddle.net/xKNrQ/. You could just add the display property to the li selector, but then you'd have to use a separate rule to apply the color change for <a> tags.
Is your li set as a block element?
This works: http://jsfiddle.net/dQNFF/1/
I added this CSS:
li {
display: block;
width: 100px;
height: 20px;
}
Related
What's wrong with my :hover below? I dosen't seem to have effect. Tried overflow hidden but it doesn't appear any effect.
.tabs-nav li:hover {
}
demo https://jsfiddle.net/tpd83jxx/
You have to apply the :hover effect in a:hover because you have already applied background-color to a element. Try and add this code.
.tabs-nav a:hover {
background-color: red;
}
Nothing wrong with the css ,Here you applied background for a tag.
So change the hover to a
.tabs-nav li:hover a {
color: white;
background: red;
}
Below code works for me
.tabs-nav li :hover {
color: white;
background: red;
}
If I am not wrong Space is added to apply hover to the child of li. In this case for anchor tag
I have a situation where i have two elements which are same level in DOM (neighbours). When i hover element which is before in DOM i want the element below it to be shown. Also i want access child of the element Im showing and show its :before pseudo element.
SCSS
&__wrapper {
display: table;
table-layout: fixed;
&:hover {
+ .filter-time__shortcuts {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1) translateY(0);
.filter-time__shortcuts-list {
transform: scale(0.5);
&:before {
display: block;
}
}
}
}
Everything works except displaying of :before pseudo element. For some reason it cant access it but it can access .filter-time__shortcuts-list.
When i move the :hover to parent of both elements, where both are children and there is no need for + selector it works. Whats going on?
Compiled CSS
.filter-time__wrapper:hover + .filter-time__shortcuts .filter-time__shortcuts-list:before {
display: block; }
edit: https://codepen.io/riogrande/pen/vWExqN
Ok so the answer is that css really was accessing the :before element. The thing was when i wanted to access the dropdown with mouse I'm not really hovering the trigger anymore. When i put the hover on the parent I'm hovering the trigger (the whole parent) all the time.
I have the below code which is in a document that I don't control. I only have the option to upload one custom CSS file for overrides. How can I accomplish this? It is to get rid of the vendor link on our site. I am good with CSS, but they have it set up tricky.
<div style="display:block !important;text-align: center !important; padding: 15px; visibility:visible !important; opacity:1 !important;
height:auto !important; width:auto !important; op:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
<a href="http://vendorsite.com" target="_blank" style="display:inline !important; font-size: 11px !important;
visibility:visible !important; position:relative !important; opacity:1 !important; height:auto !important; width:auto !important; top:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
powered by Vendor Site
</a>
</div>
No, it is not possible with pure CSS, as the !importants already declared in the HTML would override any CSS, unless there is a parent object not displayed above, that you can override.
If the !important tags were not there, the following would work:
Does it have any parent elements? You don't have any attributes to mess with on the parent div, so if this code is this code alone, you can try:
div { display: none; }
But that's a terrible idea and will hide all divs.
To apply css, you either name a classname,
<div class='parent-div'></div>
.parent-div { display: none; }
An id attribute:
<div id='parent-div'></div>
#parent-div { display: none; }
Or any other attribute:
<div animal='dog'></div>
div[animal='dog'] {display: none; }
You could hide the child a tag:
a[href="http://vendorsite.com"] { display: none; }
Try:
div[style*="!important"] {
max-height: 0;
max-width: 0;
overflow:hidden;
padding: 0!important;
}
http://jsbin.com/fasid/11/
You can try something like this:
div[style*="!important"] {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
/* And to make sure... */
div[style*="!important"] a {
color: transparent;
}
The key is to find out which other attributes you can use to hide this element. Elements that have not been marked with !important on the html. Play around with text-indent for example.
This is a tricky question, you don't have control over the code, nor have any selectors to use, and to make it worse there are a bunch of !important inline rules.
You could make it "vanish" though, the link will still be there but nobody will see it nor click on it, try something like this:
// Get the vendor's link
a[href="http://vendorsite.com"] {
// Reset mouse cursor
cursor: default;
// Set color to match page background background
color: white;
// Remove pointer events to make it appear as plain text
pointer-events: none;
// Set background to match page background
background: white;
}
// Set selection color to match page background color
a[href="http://vendorsite.com"]::selection {
background: white;
}
// Mozilla selector (optional)
a[href="http://vendorsite.com"]::-moz-selection {
background: white;
}
Nasty but does the job. I've made a CodePen to show how it works: Hide with CSS
I hope this helps, cheers.
i'm trying to have vertical buttons (text from down to up) in a horizontal nav. Can anyone help me? I read something about "transform: rotate" but I don't know where to put it..
HTML
<div id="menu">
<nav>
<ul>
<li>mission</li>
<li>projects</li>
<li>present</li>
</ul>
</nav>
CSS
#menu
{
border: 1px solid red;
width: 1325px;
height: 146px;
margin: 0 auto;
}
#menu nav ul
{
background-color: #093;
list-style-type: none;
}
#menu nav ul li
{
background-color: #00F;
width: 146px;
height: 42px;
margin: 3px;
}
#menu nav a
{
text-decoration: none;
}
From : w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)
/** CSS3 2D Transforms **/
.div{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
Never tried to use this, I usually use javascript to rotate my elements but it appears to be what you looking for (I think you want to do this only in css/html).
You can apply this directly on #menu nav ul li I think!
If it doesn't work, can you provide a JSFiddle (or sort of)?
Update 1
Ok sorry I didn't analyse your entire code, I thought you were only looking for "rotation"!
First of all, for
blue buttons from left to right
You have to use a propriety name float to do this job, then clean with clear. I recommend you to practice this with some tutorial, it's very important in CSS Positioning and it will help you a lot here (and for future i guess)! Actually I did it in the JSFiddle linked but I think you absolutely need to be friendly with float and clear (#petebolduc supposed you to use float/clear too!)
Secondly for
with the text from bottom to top
Here you can use CSS3 2D Transforms. You have to applied a 270° rotation on your text for it be bottom to top. As I supposed in the first answer, you have to applied it on #menu nav ul li.
Here is the JSFiddle updated. I did not change your width/height property because I am not sure what you want to do after, but consider adapt them! (With your actual values, <li> are out of <header> and this is not what you want, I suppose). If you need help to width and height, then ask for!
I think it can be a good tutorial for positioning : http://www.barelyfitz.com/screencast/html-training/css/positioning/ (I am french so I usually follow french tutorial..)
And the JSFidle : http://jsfiddle.net/B4SEx/1/
Hope it helped you
I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.