I made a site with lots of ghostbuttons that change color when the user hovers his or her mouse over them. The buttons are arranged by color like a rainbow and I want them to stay active/colored even when the mouse stops hovering over it so that when the user hovers over the all the buttons, all the buttons will be colored at the same time.
The buttons are all placed within bootstrap columns.
I have no experience with JavaScript so pure CSS would be ideal for me. But if JavaScript is the best way to go with this please let me know exactly how to implant it in HTML and CSS.
Please don't mind any mistakes in the spelling, I'm dutch and dyslectic :P
Thanks in advance!
Place this at the bottom of your code just before the </body> tag.
<script>
$(".btn").mouseout(function() {
$(this).css("background-color","pink");
});
</script>
You can change the (".btn") bit to any class on the page, so if you only wanted it to change btn-primary classes you'd have (".btn-primary") etc.
Related
I'm lost. I have no idea what I'm doing, so please forgive me if I write something stupid or don't understand your answers.
My goal is to have a modal box showing after clicking a button. That's the easy part and I accomplished that already, so yay me.
Basically, I'm using this code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
Now, what I don't know how to do:
1) How do I change the appearance of the button? Can I change it to an image?
The only thing I could do is place an image IN the button (looks weird), but not replacing it.
2) How do I change the position of the button?
I would like to have few buttons on the left side of the screen (not website but screen). So I would need to adjust them to be on the left side, and I would also need to change the height of all the buttons.
Now, I changed the appearance and the position of the button when trying something else (a slideout), so I know it's possible. But the codes are different and I don't know how to "merge" them. The lines that work in the first one don't work in the another.
And I have absolutely no idea in what language it is. I know that it uses this createElement thing to create this button, but I don't know how to change anything about it. I went through the whole w3school and many topics on this site but I don't know how to use this knowledge - so maybe you could help me out. Thank you!
If you want to use an image to open the modal, you should not use the button tag. Just attach your event to an img.
using the example code, replace:
<button id="myBtn">Open Modal</button>
with
<img id="myImg"></img>
and attch the click event to "myImg"
var img = document.getElementById("myImg");
img.onclick = function() {
modal.style.display = "block";
}
Repositioning is going to be a little more difficult to answer without seeing your full code. W3Schools has a good intro to CSS for beginners so I would start there.
Replace button to code similar to this id="myBtn" is important
<img id="myBtn" src="image url">
And check
https://www.w3schools.com/css/default.asp
Css is used to design the html elements
it have some property like
height, background-image , position , float , flex etc
which can help you to achieve your goals.
I am making a floating button with bootstrap, which is supposed to look good. I have done the initial style editing, but now I would like to add hover effects to it. How can this be done?
This is the code I wrote: http://codepaste.net/oiszxo#
I would like to add on hover effects, but i do not know how to do that?
Any help or ideas would be great.
It depends on the what kind of hover effect you want. You can add a simple XXX:hover styling, just like what you have tried. There are plenty of hover effects, google it. Try this
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
I've been customizing a Wordpress Theme (iconic-one) for an aquintance of mine. Everything is going according to plan, but I've ran into a problem.
I've modified the style of the navigation bar slightly, but one of the elements is not adjusting accordingly.
The problem is that when hovering over a child element of a dropdown, the parent element in the navigation bar goes back to the original color, which is blue.
Uploading the relevant code is an issue, as I have no idea what is causing the problem.
For reference: oefentherapievanuitdekern.nl is de website, you can see the problem occur on the main page.
Is there anyone who can point me in the right direction for a solution? Any help is greatly apreciated.
Kind regards,
Bik
as I can see, there are two diffrent Stylesheets overwriting each other, i am not that deep into Wordpress, but maybe in ur Theme u can define hover color and aktive color
AND maybe hover color for sub-menu?
otherwise u have to work with code :P
I am helping to maintain this website http://www.groupme.my/national/
For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".
Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.
I have tried to put in z-index, but it doesn't seem to do anything.
Please help to check how we can resolve this problem. Thanks.
If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?
If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.
The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.
The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.
EDIT added after comment : I found this z-index in the generate CSS (line:713):
.content-pane-index {
float: left;
width: 737px;
position: relative;
z-index: 0;<------------------------ HERE
}
Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)
First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.
I'll use jQuery, for Buy Now button, add this code after show pop code:
$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");
This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.
you maybe can use this code instead too:
$(this).parents(".content-pane-index").css("z-index","999");
for close button you need to restore z-index that you added before, so add this code too after closing pop code:
$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");
or
$(this).parents(".content-pane-index").css("z-index","0");
I hope you got an idea at least :)
My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().
I Love workarounds :P
if you want to show popup remove z-index from your popup CSS, for ex. I'm using z-index: 1000 in the other css
But I'm using other CSS for popup so go in popup CSS & find z-index and remove it.