I'm looking for a real life example on how to do something like this:
Rollover on image causes highlight of text like on this page: http://shop.parklafun.com/t-shirts/
If i understand your question then -moz-transition not changing the text color. Here is the code whhich change the color:
div.ProductList div.grid_6:hover > a .ProductDetails h2
It's not -moz-transition , it may be that the labelis hidden on that image and it is shown on onMouseOver Event of javascript.
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
Is there a way to find the element that contains the href to the current featherlight content when cycling through a gallery?
Basically, I want to change the .featherlight background color to match that of the source element's background color.
As you can seen in this jsfiddle, if I click on an image, .featherlight's background color matches that of the anchor that opened it. I would like the background color to change as I cycle through the gallery, so that .featherlight matches the anchor thumbnail's background color. Is there a way to get that information?
Thanks,
Scott
UPDATE: For anyone seeking the solution, I edited the jsfiddle above so that the color change now works. Thanks to Marc-André.
Yes, I believe what you are looking for is $currentTarget.
Example of usage in this wiki page
How do you change the border colour of a text box (on focus and on blur) with an extender attached to it?
I tried some JavaScript which worked on the text box by itself, but not with rounded corners extender attached.
I don't have the JS on me right now, but if you wat the code, let me know and I'll add it.
I think the easiest way to do this is use jQuery to select the element for the rounded corners then manipulate its background color.
Include the jQuery script in your page
In your onblur() and onfocus() event handlers, change the background color using the following syntax. You can use Firebug or Chrome Developer Tools to obtain the element ID (see attached screenshot). [e.g. ctl00_SampleContent_Panel1]
$("#ctl00_SampleContent_Panel1").css('background-color', 'blue');
Your Question is not clear but use the below code in your stylesheet
to change the border color of textbox onfocus
input[type=text]:focus {border:#00F solid 2px}
I've been struggling with this for days and just can't get it. Is it possible to get the hover state of a link to look like the attached picture? So it appears ilke a highlighter was used on the text and have the white space between the lines
http://krwilliams.com/lab/test/highlighterlinks.jpg
sorry it wouldn't let me attach the image.
Here is the closest I can get
http://krwilliams.com/lab/test/resources.html
In your example, turn off float:left on your A-tag.
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.