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;
}
Related
I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.
Can anyone point me in the right directory, it would be greatly appreciated.
https://codepen.io/robot43298/pen/WNGENNL
.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}
Try this,
Remove this margin
.navbar-end .dropdown-trigger {
margin-top: 15%; /* Remove this margin */
display: inline;
vertical-align: bottom;
}
and add some padding here as per your need
.dropdown{
padding-top: 20px;
}
This should do the trick;
I tried looking your code in console, I added one line and removed one.
and it seems to work as per you expectation.
Do let me know if this what you wanted.
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 am trying to add CSS to my embedded "Pay" button from selly.gg on my site created on carrd.co.
<button data-selly-product="c2f270b2">Pay</button>
I'm looking for some sort of link to a css file, but there are none anywhere. Please let me know how I can get this to work.
Following worked fine for me
button{
margin:auto;
display:block;
background-color: #FDB714;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.
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.