Im trying to change the hover colour of a rectangle shape which ive made a link.
The html is
<a href='page1.html'>
<div class="tri">
</div>
</a>
and the css is
.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}
I think this is the code I need to put in
a.tri:hover { background-color: yellow;}
but its not working
please help!
Try to use like this: Demo
CSS:
.tri a {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}
.tri a:hover {
background-color: yellow;
}
HTML:
<div class="tri"> <a href='page1.html'> </a></div>
Its not good practice to use <div> inside <a>. So interchanged the position of both in html as well in CSS
You have to add space a[here].tri:hover { background-color: yellow;}
.tri {
width:100px;
height:200px;
background: #b51e4c;
position:absolute;
top:100px;
left:100px;
}
a .tri:hover { background-color: yellow;}
<a href='page1.html'>
<div class="tri">
</div>
</a>
Your code should work correctly. Try adding the class directly to the <a> tag. Here is the codepen demonstrating your code:
http://codepen.io/anon/pen/NPVeoP
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 Jerry-rigged a line behind 3 elements by having bars on the right and left of the elements. However, this solution isn't consistent across browsers -- See images below.
Is there a better way to place a line centered behind several objects using HTML and CSS? I tried and failed using pseudo elements/selectors (i.e., :after or :before) before coming to my solution below, but I don't want to rule them out.
Chrome
IE
My solution is, in fact, so jerry-rigged that I can't reproduce it in JS fiddle, but I did something like this:
(My fiddle just for reference https://jsfiddle.net/8t6qtafy/1/)
HTML
<div class="tab-header">
<span>
<div class="header-bar bar-left bar-blank"></div>
<p>1</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>2</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>3</p>
<div class="header-bar bar-right bar-blank"></div>
</span>
</div>
CSS
html {
font-family: calibri;
}
.container {
width = 400px;
margin:auto;
}
.tab-header {
margin-top:10px;
position:relative;
padding:5px 10px;
//display:inline-block;
}
.tab-header span {
height:45px;
width:45px;
border-radius:50%;
margin:auto;
color:#4c4a47;
background-color:transparent;
border:2px solid #99958E;
display:block;
position:relative;
}
.tab-header span p {
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
top:-4px;
left:.5px;
margin:2px;
}
.tab-header .header-bar {
width:130px;
height:3px;
background-color:#99958E;
position:relative;
}
.tab-header .bar-right {
left:42px;
top:-36px;
}
.tab-header .bar-left {
right:130px;
top: 19px;
}
.tab-header .header-bar.bar-blank {
background-color:transparent;
}
A bit late to the party: what browsers needed to be compatible?
Something like that is a bit neater and could work on all modern browsers and IE10: https://jsfiddle.net/fparent/qhprm41a
<div class="tab-header">
<span class="step active">1</span>
<span class="step">2</span>
<span class="step">3</span>
</div>
Strange issue here which I can't see the problem with! I'm setting the width of the entire element using the class sale_container. But it's width is not changing at all!
See JSFiddle Demo
CSS:
/*Sale styles*/
.add_sales input {
background:none;
border:none;
color:#FFF;
}
.sales_toolbar input {
width:30px;
}
.sale_container {
width:500px;
border:2px solid #FFF;
}
.sale_image {
height:200px;
width:200px;
background-size:cover;
border-radius:10px;
}
.sale_image_container {
border:solid #000 1px;
float:left;
border-radius:10px;
background-color:#353535;
}
.sale_image_container p {
margin:10px;
}
.sales_toolbar {
float:right;
}
HTML:
<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
<div class="sale_container">
<div class="sale_image_container">
<div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
<p>KR</p>
</div>
<div class="sales_toolbar">
<input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
</div>
</div>
</form>
It seems to be working on the JSFiddle, but when I preview it in Chrome, it looks like this:
It's possible that additional styles are being included from an alternate CSS source. Have you tried using Inspect Element to view the div, and see if it has any unexpected styles being applied? Chrome natively has the feature built-in if you right-click any element.
Glad to help.
Set position to absolute of sale_container to change width.
.sale_container{
width: 300px;
position: absolute;
border: 2px solid #E97676;
}
Use firebug (http://getfirebug.com/) to inspect html element and css attributes.
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
I currently have a <div> square but don't know how to make another square with a different style. When ever I use <div> to make another square in css, the style would be the same as the first square.
CSS:
div{
height:100px;
width:95px;
background-color:#B80000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
html:
<div>
<span>M</span>i'm lovin' it<l>™</l></div>
try like this
CSS:
#squareA{
height:100px;
width:95px;
background-color:#B80000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#squareB{
height:100px;
width:95px;
background-color:#B8FFFF;
border-radius:4px;
text-align:center;
margin-left:132px;
}
html:
<div id="squareA">
<span>M</span>i'm lovin' it<l>™</l></div>
<div id="squareB">
<span>M</span>i'm lovin' it<l>™</l></div>
Explanation:
you were styling all the divs in your css. the same style will apply to all the divs that you have in your markup. if you need to apply separate styles to separate elements, for e.g. two divs, one way is to give them both different ids and apply styles to particular ids.
P.S : there are a loads of other ways too. try to read more on CSS styling.
Use a different id for each one.
Then for your css
Div#first {
}
div#second {
}
Use classes instead of ids or the literal div selector in your CSS. Create a class that represents your square and two classes that represent your colors.
HTML:
<div class="square a">
<a href="http://www.mcdonalds.com/us/en/home.html">
<span>M</span>i'm lovin' it<l>™</l>
</a>
</div>
<div class="square b">
<a href="#">
<span>B</span>bee<l>™</l>
</a>
</div>
CSS:
.square {
border-radius:4px;
height:100px;
width:95px;
border-radius:4px;
text-align:center;
margin-left:132px;
}
.a {
background-color:#B80000;
}
.b {
background-color:#00ff00;
}
http://jsfiddle.net/mSA6E/
You can use the html "id" attribute. See this jsfiddle:
div {
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
<div id="red"></div>
<div id="green"></div>
You can put as much css classes as you like to an html tag. For example:
.square { display:block; width:100px; height:100px; }
.red { background:#f00; }
.green { background:#0f0; }
.blue { background:#00f; }
Then
<div class="square red">Red square</div>
<div class="square green">Green square</div>
<div class="square blue">Blue square</div>
This approach is also more verbose than having multiple repetitions of the same instructions.