I'm designing a webpage which has a menu bar with links on the page. I have a style sheet for it but I'm having trouble with the "hover" code. A piece of my code looks like:
<body>
<div id="wrapper">
<div id="menu">
<a class="mLink" href="main.php">Home</a>
With a css code:
body {
background-color:black;
text-align: center;
height:100%;
}
div#wrapper{
margin-right: 5%;
margin-left: 5%;
margin-top: 0%;
margin-bottom: 5%;
border: outset;
border-color: white;
}
a.mLink{
color: white;
font-size: 35px;
padding: 10px;
}
a.mLink:hover{
color: black;
}
a.mLink:active{
color:black;
}
div#content{
color: white;
font-size: 40px;
}
The "hover" and "active" both aren't working and I don't understand why. I've tried a lot of different style variations such as a:hover, #menu a:hover, #menu a.mLink:hover, and nothing seems to work. Any help would be much appreciated.
Perhaps you could include a screenshot of how it looks and tell us how it's supposed to look? I copied and pasted what you had into this jsfiddle and it works just fine to me. The only difference between what you posted and what I did was change the a:hover color to red and the a:active to yellow so you can see the difference instead of having black on black.
So can you post a screenshot of what's happening vs what you expect? If so, I'll update my answer accordingly.
This may sound stupid, but clear the cache. It might be loading your previous version or something. Also what Web Browser is it? And is there any JS code that might dynamically change/add class.
Related
I am a new user working on a website. I have taken several udemy classes and made one website that went well. I am now looking to make a second and I am running into an odd problem: some changes to the CSS header tag have an effect on the header in my index page while other changes do not. For example changing the background color does have an effect, while anything to do with flexbox or padding simply does not cause any change. I am writing this after several sittings and going back to my previous website, hoping someone can help me out. Here is the snippet of my header and the snippet from the css. The code works in the snippet here, but not when I preview! I am using dreamweaver.
header {
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
justify-content: space-between;
}
.navButton {
border-style: solid;
border-width: 3px;
border-color: white;
color: white;
font-family: 'Source Sans Pro', sans-serif;
padding: 11px 25px;
display: inline-block;
margin-top: 10px;
border-radius: 2px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
position: relative;
}
<header>
<div class="logo">
<img src="Images/smaller GGR Logo.png" width="203" height="114" alt="Gas Guzzler Reviews Logo"/>
</div>
<nav>
<div class="navButton">About Us</div>
<div class="navButton">Contact Us</div>
</nav>
</header>
My main goal is to have the logo on the left and nav buttons on the right, any help is appreciated!
Temani Afif helpfully pointed out the code was working in the snippet. I realised I made an edit from when it did not work in the snippet when I first tested it. I had a CSS Reset after my regular CSS sheet screwing everything up. Thank you!
Mmm, you should check the CSS specificity in your code because your code snippet is working just fine to me.
Here is the changes I made to test it.
CSS changes:
.logo {
margin-left: 30px;
}
.contact__button {
margin-right: 30px;
}
HTML changes:
<div class="navButton contact__button">Contact Us</div>
Before you mark me as duplicate: I've read all the similar questions and tried the solutions and either I'm too dumb to understand them (a valid possibility), or my problem is different, but they didn't work for me.
I was marked off-topic on wordpress forum since it is apparently a css/html problem, so I reposted here.
Now on to the problem:
I'm having trouble with removing the underlines of some links I have on my site. Here's my html definition of the links:
<p style="text-align: center;">
<a class="buttonL" href="http://cns.uni.lu/homel"><</a>
<a class="buttonR" href="http://cns.uni.lu/homer">></a>
</p>
And my CSS from the "custom CSS" page:
.buttonL {
border-radius: 50%;
position:fixed;
top: 50%;
left: 0%;
background-color: transparent;
border: none;
color: grey;
padding: 5px 20px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 50px;
margin: 4px 2px;
cursor: pointer;
font-weight: 900;
}
.buttonR {
border-radius: 50%;
position:fixed;
top: 50%;
right: 0%;
background-color: transparent;
border: none;
color: grey;
padding: 5px 20px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 50px;
margin: 4px 2px;
cursor: pointer;
font-weight: 900
}
I know it's redundant and inelegant. No use commenting on that. I can make it more elegant later.
For some reason, there is a line underneath the links, that won't go away. I've tried using
text-decoration:none !important;
, but to no avail. I've applied it on .buttonL, .buttonR, a, .buttonL a, .buttonR a, .buttonL:link, .buttonL:active, .buttonR:link, .buttonR:active, .buttonL a:link, .buttonL a:active, .buttonR a:link, .buttonR a:active.
I've also tried doing
border-bottom: none;
and
box-shadow: none;
, also to no avail.
Any ideas as to what I'm doing wrong?
P.S. I can't link the page I'm referencing, as it is on an internal network. Sorry...
Here's a screenshot of the page:
The links in question are the arrows to either sides. Although the other links have the same problem.
Use This CSS may be help you thanks
body .buttonL, body .buttonR {
text-decoration: none !important;
}
OR USE THIS
body a{
text-decoration: none !important;
}
I just found the solution:
For some reason the background gradient (although it was white) left a line at the backgrounds border (or center - I'm not sure). To remove this, I added
.entry-content a{background-image:none;}
to the css file, instead of just making it transparent.
Thanks for all the help :D
If the css is not working means then use jquery
<script>
$(document).ready(function(){
$('.buttonL').css('text-decoration','none');
$('.buttonR').css('text-decoration','none');
});
<script>
I hope this will solve your issue.
I'm working on a really simple little bit of CSS, where the cursor changes to a pointer when the mouse moves over it.
I've been looking at this code for hours, and I can't figure out why the cursor will not change to a pointer. When I move over the div, it changes briefly and then changes back to arrow.
It's probably something really simple, but I just cannot see it.
.holder{
width:1000px;
overflow: auto;
margin: 0 auto;
font-family: 'Abel';
padding-left: 50px;
padding-top: 50px;
position: relative;
}
.action_pod{
float:left;
border-radius: 10px;
border: 1px solid #777;
font-family: 'Abel';
margin: 10px;
overflow: hidden;
padding:2px;
cursor:pointer;
}
.act_pod{
background-color: #cf9b63;
color: #fff;
width:100%;
border-radius: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 1em;
text-align: center;
cursor: pointer;
}
a:link{
text-decoration: none;
color:inherit;
cursor: pointer;
}
a:visited{
text-decoration: none;
color:inherit;
cursor:pointer;
}
<div class="holder">
<div class="action_pod">
<div class="act_pod">
add new raw season
</div>
</div>
</div>
update: Thanks for all the suggestions. I've tried them all and so far nothing has worked. I'm wondering if there's something hinky in my browser now...
update 2: Looks like its an error on my Mac somehow, as no links on any website make the cursor become a pointer. Surprised my question got marked down as I was only seeking help on an issue I was having and gave all the info I had as I went along.
update 3: Apparently it's an issue with running Photoshop CC on Mac at the same time. Found the solution here if anyone has the same problem in the future. https://apple.stackexchange.com/questions/151370/my-cursor-is-wrong-in-certain-apps-safari-chrome-mail
You should use
divName:hover {
cursor: pointer;
}
Add the CSS to the parent div
holder:hover {
cursor: pointer;
}
Remove all the cursor:pointer; bits you have right now in your code, and add this to your css:
.act_pod:hover{
cursor: pointer;
}
It's really simple try this.
body{cursor:default;}.holder a:hover{cursor:pointer;}
Remove All Cursors In Other Div's Classes
And Add This Property In Your Class
.holder:hover{
........
cursor:pointer;
}
My inaugural post here, hope you all can help. :)
I have been working on creating a pure XHTML strict website no images but the products however I'm in a small jam. I can't seem to find a way to make the a button that appears as such as shown here:
Where it has a hover state, rectangle and currently is
<div class="topprodcartadd">Add to Cart</div>
I made a little CSS class that looks like this:
.topprodcartadd {
width: 190px;
height: 50px;
background-color: #000;
margin: 10px 0px;
padding:0px 10px 10px 0px;
float: left;
text-align: right;
vertical-align: middle;
}
.topprodcartadd:hover {
background-color: #00a7e6;
}
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
}
.topprodcartadd a:hover {
color: #fff;
}
I want to make it link somehow but in XHTML Strict it gives me validation errors when I rock the code like this:
<div class="topprodcartadd">Add to Cart</div>
So does anyone have any other ideas on what I can do to make the button appear that way?
Thanks!
Change your CSS for the anchor to:
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
display:block;
width: 190px;
height: 50px;
}
jsFiddle example
I added display:block and a width and height so that the link takes up all the room in the div.
So, if I get your problem right:
1) you can set display: block for a so it fill the parent element.
2) are you sure that you need XHTML Strict?
If you simple need mouse cursor to change into a hand, just add cursor:pointer to your DIV's style, you don't have to use an anchor.
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/