I want to do a div as a link, and to tell user that thats is a link I want to do a hover with a different color. But here's a problem: in my div there is picture and text in two separate divs.
div {
:hover {
background-color: light cyan;
}
And when I hover with a mouse on a div the result is:
But I need the all div to become colored. Can you help me?
You can insert your both div tags in a single div and set a class for some css
.exampleclass:hover { background-color: light cyan; }
and use as well as you want.
Otherwise If you want something more from me.
Then please provide html and css both codes to make changes and more better for you. :)
It was really easy, may be some bag of sass, but when i did div:hover{background-color: light cyan;} it really solve the problem.
Thanks you, jonju.
Related
What I want it to look like
I have uploaded a photo of exactly what I'm trying to do. Just to clarify, this is an assignment and I do not want it to be done for me. I'm simply asking how I should go about doing this. The white box that has text boxes within it is what I am trying to create. Any help is appreciated,
Just add all the elements of the box inside a div tag and then you can manipulate the divs background-color positioning etc. using CSS.
.white-box {
background-color: white;
color: black;
<!--other positioning attributes-->
}
<div class="white-box">
Content
</div>
That's a form! If its not a form and you are trying to do it via css, you are going to do what frogger said.
Here: http://www.w3schools.com/css/css_form.asp
I have an issue where, ocassionally, when I set a background image on an HTML element it displays a completely random image that is also set as a background image elsewhere on the page.
For example, I have a list item that has a background image "myimage-abc.jpg".
I also have a div with a background image of "myimage-123.jpg". Everything is as expected for most people however for some Apple users (of which my Managing Director is one) the image "myimage-123.jpg" shows up on the list item as well as the div.
Has anyone else had this issue before? Any ideas how to get around it?
Thanks
Use inspect element on the element with incorrect background image and see which CSS selectors are overriding the background image that you want to have.
Then report back with the CSS selectors responsible for styling the elements in here. Keep in mind that CSS selectors are very particular about the way in which you use them.
Until then here's something that could be causing your problem, without my knowing your current CSS state.
From an answer on another question:
I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.
In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:
body .test-parent .test-child {
color: red;
}
body .test-parent .test-child {
color: blue;
}
The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.
However if we declare the following:
body .test-parent-two .test-child-two {
color: red;
}
body .test-child-two {
color: blue;
}
Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.
The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.
Hope that also helps!
As you can see from these screenshots: http://imgur.com/JUh6VVG and http://imgur.com/Sg7av0n I'm using layerslider wp and I'd like to make the background around the text transparent. You can see in the second screenshot that there's a place for custom css. What css should I put in there to make that happen? As always I appreciate the help.
Cheers!
You'll have to find the class or id of that div. Once you know that, you can use the following css:
.your-text-div {
background-color: transparent;
}
I have a DIV square containing the word "Next". I would like to have the DIV background color change when I hover over it and have it take me to a link when I click on it. Can I do this without using Javascript? I don't just want to use a link as I guess for that then it would only work if I go above "next".
Thank you very much for advance helping.
Inevitably we have to ask: why not make it a hyperlink? If it quacks like a duck and looks like a duck, it should really be a duck.
You can handle the hovering effect with a simple :hover rule in your stylesheet (e.g., div.whatever:hover { color: red; }), but you can't instill an element with functionality like going to a new page without the use of JavaScript.
In HTML4(and to the best of my knowledge) HTML5 you can't do this. I heard they are planning on doing it in XHTML2 but that's not out yet.
You could simply use the <a> element like a <div> just give it a class, for example NextLink and then you can do things in CSS to make it look and act like a div:
.NextLink {
display:block;
}
.NextLink:hover {
background-color:red;
}
You can achieve this by having a hyperlink within the DIV with display:block:
<style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>
<div id="next">
Next
</div>
Yeah, you can't really do that without javascript--or at least it wouldn't be worth trying, in my opinion. The best approach would be to style the a tag. Something like this:
a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}
Look, this is my test site.
http://www.securebitcr.com/test/balls.php
The problem that I am having is, that I see the link style in the flying objects, but I am resetting that in my css .
Please take a look at my code, I've been trying a lot of things and anything works for me.
Thanks,
Marco,
Add this CSS?
.box img {
border: 0
}