I have the following unique attribute assigned to a class:
.subcategory1:hover span { background: url(entertainment-hover.png); }
I have many such subcategory classes and I want to assign them additionally general attributes for :hover span and I came up with the following:
[class*="subcategory"]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
But it doesn't work and I cant find the problem!
Does anyone know what I have to amend to make this work assigning these attributes to all subcategory classes on :hover for span?
Please note that I dont have access to the HTML Code!
EDIT
[class*=subcategory]:hover span{
background-repeat: no-repeat !important;
background-size: 20px !important;
}
.subcategory1:hover span{
background: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
}
<div class="subcategory1">
<span style="font-size: 100px;">I am in a mess</span>
</div>
You can add another class to the current classes that you want to add an effect on hovering it
for example
.hover-effect:hover span {
/*
your CSS code
*/
}
<div class="subcategory1 hover-effect">
<span>text</span>
</div>
<div class="subcategory2 hover-effect">
<span>text</span>
</div>
<div class="subcategory3 hover-effect">
<span>text</span>
</div>
<div class="subcategory4 hover-effect">
<span>text</span>
</div>
remove quotation from the class name in css file
[class*=subcategory]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
I made a jsfiddle for you too.
Related
In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");
I'm trying to make an animated menu that when I hover over it , the background (or image) reduces and at the same time the text expands.
Thats my style sheet :
.menus {
float: left;
background-image: url(images/menus_bg.png);
width: 208px;
height: 283px;
}
.menusimg {
width: 208px;
height: 283px;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/menu1.png);
}
.menusimg:hover {
background-size: 80% 80%;
}
.menusimg, .menusimg:hover {
-webkit-transition: background-size 0.2s ease-in ;
}
.menustxtbox {
font-family: MP;
padding-top: 240px;
width: 208px;
height: 283px;
color: #4c4c4c;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.2em;
}
.menustxtbox:hover {
padding-top: 235px;
font-size: x-large;
color: #4fa3f9;
}
.menustxtbox, .menutxtbox:hover {
-webkit-transition:font-size 0.1s linear;
-moz-transition:font-size 0.1s linear;
}
and the html :
<div class="menus">
<div class="menusimg">
</div>
<div class="menustxtbox">
Text
</div>
</div>
Any ideas? A simple Java script or anything that will solve this problem? :)
Thank you in advance ^^
I second what ntgCleaner said.
In addition you can use:
$('.menus').hover(function(){
$('.menusimg').addClass('active');
$('.menustxtbox').addClass('active');
}, function(){
$('.menusimg').removeClass('active');
$('.menustxtbox').removeClass('active');
});
And your css would have:
.menusimg.active, .menusimg.active{
-webkit-transition: background-size 0.2s ease-in ;
}
etc.
Well, without any code to see that you've done anything or tried anything with javascript, I would suggest this:
Change your CSS to make real sizes of font size first:
.menustxtbox {
font-size:40px;
}
then make some jquery
$('.menus').hover(function(){
$('.menusimg').animate({width: "100px"});
$('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$('.menusimg').animate({width: "208px"});
$('.menustxtbox').animate({fontSize: "40px"});
});
Then delete your :hover css styles
And if you want to use hover, I would suggest looking into hoverintent
UPDATE for a comment below
To do this for each separate menu item, you will have to name things a certain way. Here's an example.
HTML
<div class="menu">
<div class="menuItem" id="menu1">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu2">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu3">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
</div>
Then with jQuery, you will have to use $(this) and .children()
$('.menuItem').hover(function(){
$(this).children('.menusimg').animate({width: "100px"});
$(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$(this).children('.menusimg').animate({width: "208px"});
$(this).children('.menustxtbox').animate({fontSize: "40px"});
});
When you use $(this), you will do whatever you want to the specific thing you are trying to use. Then you just go up or down from there using parent or children to do something to either of those.
I can't figure out why the border isn't showing up. I have a main wrapper that encapsulates all the elements; I'm just making the background of each element a transparent white, and then adding a transparent white border to the wrapper.
http://violetoeuvre.com/
/* Wrapper - Main *********/
.main_wrapper{
display:block;
background: rgba(255,0,0,.5);
width:1000px;
height: 2000px;
margin-left:18%;
margin-top:7%;
border:10px;
border-color: rgba(255,255,255,.5);
}
html
<div class="main_wrapper">
<!-- Logo _____________________________________________________-->
<div class="logo">
<a href="index.html"><img alt="emma carmichael" height="150px"
src="images/Home/emma-logo.png"></a>
</div>
<!---Navigation Menu ______________________________________________-->
<div id="main_menu" class="wrapper_nav_box">
<div class="nav_box">
WRITING
</div>
<div class="nav_box">
BLOG
</div>
<div class="nav_box">
CONTACT
</div>
</div>
Any ideas?
As #Lotus said:
You forgot to include the border-style
As an altenative to use the shorthand as Lotus suggested, you could do like this:
.main_wrapper
{
/*other stuff*/
border-width: 10px;
border-style: solid;
border-color: rgba(255,255,255,.5);
}
Note: I add this to extend on Lotus's answer, and to help to answer #Claire's comment "i know i should use shorthand, but why wouldn't the other way work?"
Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader
I am having a problem with my css sprites. It looks like it is working (well, to me it looks like it should work). All the sprites just show the first icon but not the other ones.
Looked at many places and could not find an answer.
Thanks for helping me.
I put it up on a seperate page to save time.
[dead link]
And for those who aren't able to go to that page for any reason, here is the code:
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
And the css is here (shortened):
.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}
Thank you very much for helping!
You have a CSS specificity problem.
The CSS like this:
.iconFB {
background-position:0 -40px;
}
is being overridden by this:
.linkIcon {
..
background: url(iconSprite.png) no-repeat top left;
..
}
because background is shorthand for (amongst other things) background-position.
The easiest way to fix this is to swap around the two blocks of CSS, like this:
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align:middle;
background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
background-position:0 0;
}
.iconFL {
background-position:0 -82px;
}
.iconRSS {
background-position:0 -164px;
}
.iconY {
background-position:0 -246px;
}
(I fixed the position of the Facebook icon, from 0 -40px to 0 0)
.linkIcon.iconFB and .linkIcon.iconFL and so on will solve this. Currently your linkIcon style overwrites the positions you set in .iconFB because it's further down in the CSS file.
Edit: (or just move the iconFB etc. styles below the .linkIcon styles)
The position of the background image is being overridden by the shorthand background in .linkIcon.
Either re-order the CSS, or use separate background-image and background-repeat declarations (and no background-position) in .linkIcon. I'd argue the latter is preferable.
Another way would be to use id's as these icons are probably unique and not reused on the same page. As it is used to "identify" a certain icon it makes sense to use an ID instead of a class.
<style>
#iconFB {
background-position: 0 0px;
}
#iconFL {
background-position: 0 -82px;
}
#iconRSS {
background-position: 0 -164px;
}
#iconY {
background-position: 0 -246px;
}
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align: middle;
background: url(iconSprite.png) no-repeat top left;
}
</style>
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
<div class="iconDiv">
<a href="#" title="RSS Page">
<img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.youtube.com/" title="Youtube Page">
<img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
</a>
</div>