Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Shouldn't the css style be changed permanently once it gets applied?
see below:
<style>
div{width:100px;height:100px;background-color:red}
div:hover{background-color:black}
</style>
<body>
<div></div>
</body>
I mean to say that when hover occurs on the element the background color of the element gets changed, and once changed it should be changed permanently because the hover state has changed the property of the element.
i also have seen the cases which have permanently changed the property
No, hover means that this style is being applied only when the mouse hovers over the element. As soon as the mouse stops hovering over the element, the style reverts back to what it was before.
If you're looking to make permanent changes like this, you're likely going to need JavaScript.
ezuk's answer is great (accept that one), but I was bored and thought of a very silly solution using just CSS.
HTML
<div>
<span>hello</span>
</div>
CSS
body, html {
width: 100%;
height: 100%;
}
div {
display: inline-block;
background-color: #eee;
}
div:hover {
width: 100%;
height: 100%;
}
div:hover > span {
background-color: #555;
}
View on JSFiddle
It works until you mouse out of the browser (or iFrame or whatever)
:)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a navigation menu on this site which looks like this:
I'm trying to increase the height of the navigation for example to 60px. I've tried playing with CSS to increase the height but the height won't change. I'm not sure what I'm doing wrong.
I've tried height, padding, heigth !important but there's no effect on my menu.
Can you help me to increase the height of my navigation?
So here is my answer. The problem is the background for your navigation. I would prefer a solution like this:
.row .nav {
line-height: 60px;
background: black;
}
.row .menu a {
line-height: 60px;
}
.row .menu .sub-menu {
top: 56px;
}
Insert this into your CSS. This code is tested and works. Tell me if it works for you.
It should looks like this:
Hope this helps
.row .sixteen.columns {
height: 50px
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Here's the site:
http://cholakislaw.com/install/
I think it's a tweak I made to the CSS because the demo for the theme doesn't suffer from this issue:
http://www.mojo-themes.com/item/attorneys-lawyer-wordpress-theme/demo/
Best way to do is:
CSS
.slider ul li img {
display: none;
}
.slider ul li:first-child img{
display: block;
}
By doing this, you'll hide all slideshow images and then show only first-child on load. Later, js will do it's trick and overwrite it.
This is due to the fact that the images start to load before the slider component, easySlider in that case, has set height and overflow property of the #slider element. Thus, when the images start to load, #slider is high enough to see more than the first image.
To prevent this, you could add in slider.css the following rules :
#slider {
height: 100%; /* parent element with class .slider has his height already set */
overflow: hidden;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I use a website builder, and there is a custom CSS box, but how do I make my navbar thin like Twitter's navbar? The navbar class is: container
This is pretty hard to provide an absolute answer for without any CSS and HTML, but you should be able to set (where 40px is a sample height)
.container{
height:40px;
}
If that fails, you likely have a rule with a higher level of specificity, so either alter that directly (dont), or extend the above to match or beat it (do).
If you want to play dirty, use !important (not recommended)
.container{
height:40px!important;
}
Depending on the other CSS rules you have in place, you may need to set other properties to get the desired effect, e.g.(and this is a bad example):
.container{
height:40px;
max-height:40px;
min-height:40px;
line-height:40px;
overflow:hidden;
}
Instead of twitter, lets take the example of stack overflow. Class would be container.
.container {
max-height: 100px;
min-height: 100px;
background-color: #000;
min-width: 100%;
max-width: 100%;
}
You are more likely to use max and min properties to make the navbar stay at the full of the top of page.
Other properties are just for styling nothing else. The height depends on the value you provide in the height attribute, you can use max- or even min- or height they would work.
Hey, edit your code:
.container {
height: 200px; // change this value..
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Sometimes you want to make an entire div (or other element) into a clickable link. Here’s an example.
Here’s a cross-browser way to do it using pure CSS:
HTML:
<div class="clickable">
Rest of div content goes here
</div>
CSS:
div.clickable { /* Containing div must have a position value */
position:relative;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
First, give the containing div position. That way, when we apply “position:absolute;” to the link (see next paragraph) it will position itself relative to the containing div.
Next, make the link absolutely positioned and the full size and depth of the containing div. The link’s z-index makes sure it’s above everything else in the div, so no matter where you click, you’re clicking the link.
IE, naturally, has quirks. In this case, IE requires a background color for such a link to be clickable, so we give it a background color (white), set the opacity to 0, then give it an IE-only opacity of 1% using IE’s proprietary filter property.
Finally, put whatever content you want in the div. If you’re going to be layering the content using z-index, just make sure not to give any element a higher z-index than the link.
You can wrap a div in a link and it is valid HTML5.
<a href="#">
<div></div>
</a>