I have this CSS
.menuPopup div {
width: 100%;
padding: 5px;
}
.menuClose {
width:10px;
height:10px;
padding:0px;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
Which should apply to this HTML:
<div class="menuPopup">
<div >A</div>
<div >B</div>
<div >C</div>
<div class="menuClose">X</div>
</div>
When applied, the .menuPopup div declaration allways overrides .menuClose.
How can I change the order? ie. make the width of "X" 10px instead of 100% ?
It's because you have more selectors in the top declaration.
if you do this it should overwrite:
.menuPopup div.menuClose {
width:10px;
height:10px;
padding:0px;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
See this article for an explanation on how css cascade priorities are handled:
http://eriestuff.blogspot.com/2007/11/css-cascade-what-defenition-takes.html
You can try using !important for the rule you want to be enforced. For example:
.menuClose {
width:10px !important;
height:10px !important;
etc...
}
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}
I'm trying to make a div appear when the user hovers over another div. The problem is that the appearing div is neither a child nor a sibling of div the user should hover over. I made a jsfiddle to show what I mean here.
How do I make the #showMe appear when the user hovers over the #button?
#parent{
height:200px;
width:200px;
background-color:yellow;
}
#button{
height:100px;
width:100px;
background-color:blue;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
<div id="button">button<div id="child">child</div></div>
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
Well, your only option is to do it via Javascript
Javascript:
function showShowMe() {
document.getElementById("showMe").style.display = "block";
}
function hideShowMe() {
document.getElementById("showMe").style.display = "none";
}
#parent{
height:200px;
width:200px;
background-color:yellow;
}
#button{
height:100px;
width:100px;
background-color:blue;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
**<div id="button" onmouseover="showShowMe()" onmouseout="hideShowMe()">button<div id="child">child</div></div>**
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
Well, actually it is not possible to achieve that that by pure CSS and you'd use JavaScript.
But in this particular case we can somehow fake the effect by using adjacent sibling combinator + over the #parent instead, and giving a pointer-events of none to the parent and then re-setting the value of pointer-events to initial on the #button itself.
It's worth mentioning that pointer-events on HTML/XML elements is not supported in IE<=10.
Updated example
#parent{
height:200px;
width:200px;
background-color:yellow;
pointer-events: none;
}
#parent:hover + #showMe {
display: block;
}
#button{
height:100px;
width:100px;
background-color:blue;
pointer-events: initial;
}
#child, #sibling, #showMe{
height:50px;
width:50px;
background-color:red;
display:none;
}
#button:hover #child{
display:block;
}
#button:hover + #sibling{
display:block;
}
<div id="parent">parent
<div id="button">button<div id="child">child</div></div>
<div id="sibling">sibling</div>
</div>
<div id="showMe">showMe</div>
I find that the footer is displayed properly on Chrome but it looks like it doesn't get overflow:hidden; on Firefox. The wrapper div is still going a little more below the footer.
<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html
Here are CSS properties of these two wrapper divs:
.wrapper6 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:180% !important;
font-family: orator std;
overflow:hidden;
}
.wrapper8 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:280% !important;
font-family: orator std;
overflow:hidden;
}
And properties for both footers;
galeri2013.html;
.footy4 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:96%;
overflow:hidden;
}
gallery.html;
.footy7 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:150%;
overflow:hidden;
}
I think I'm not using best ways to handle it, if you see anything wrong/not the best way of coding please tell me so that I can learn and also improve myself.
To clarify again, I want to have my footer stuck to bottom on Firefox, as it is on Chrome!
Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal!
So this is what I did to achieve it basically;
<div class="wrapper">
//some other content
<div class=footer>
//footer content
</div>
</div>
and I've put backoverflow:hidden; to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question.
Hope these can be useful to someone and thanks for everyone who helped.
I am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle