38 points
Community rank #1607
newweb
VeteranJust Getting Started
MemberLikes (0)
Hello
I've removed the product title and choose option from the grid view of products but wanted to add some CSS for when a user hovers over each image. Ideally changing the background and border colour of the div that the product image sits in.
I added the following code to custom.css but this has added the border to the image (and some other div behind the image) but not the main product border like I was expecting have played around a little but haven't got the desired effect. Any ideas?
21568 pointsCommunity rank #0Supreme DeityWPMU DEV StaffLifetime member
Support Kangaroo
(joined March 2011)
Likes (0)
Greetings Harry,
Thank you for this great question and a significant item to bring up.
I am sorry that I do not know the answer to this obvious custom coding question and do not know why your coding is not working as anticipated, but I am not a coder either :-P
Therefore I have no choice but to see if I can get this extremely talented but busy lead developer in here with his invaluable insight into this theme for his advice/advise for us.
Though this may take a bit longer then a normal ticket, I will try to get him in here asap.
21568 pointsCommunity rank #0Supreme DeityWPMU DEV StaffLifetime member
Support Kangaroo
(joined March 2011)
Likes (0)
Greetings Harry,
As I had mentioned before, this lead developer Moha is a very busy guy and in an attempt to expedite resolution of this ticket a bit I am going to see about getting @Jeffri in here who is a hot talented new theme developer of ours to see if he may be able to offer us a quick solution.
160 pointsCommunity rank #308El PresidenteWPMU DEV Staff
Designer
(joined July 2012)
Likes (0)
Hi Harry,
Please try this one:
.product:hover {
border: 1px solid #000000;
}
Notice that I removed space between .product and :hover. The .product:hover selector will target the .product element hover state, while .product :hover will target the hover state of every child element of .product, which could explain the issue you are having.
Responses (7)
Member (joined September 2011) Likes (0)
Here is the link to see what has happened
http://onceuponawardrobe.com.au
Support Kangaroo (joined March 2011) Likes (0)
Greetings Harry,
Thank you for this great question and a significant item to bring up.
I am sorry that I do not know the answer to this obvious custom coding question and do not know why your coding is not working as anticipated, but I am not a coder either :-P
Therefore I have no choice but to see if I can get this extremely talented but busy lead developer in here with his invaluable insight into this theme for his advice/advise for us.
Though this may take a bit longer then a normal ticket, I will try to get him in here asap.
Cheers, Joe
Member (joined September 2011) Likes (0)
Hi
That would be great, when I edited with FireBug I managed to get the right section but once added to the code it did this strange thing.
Any advice would be much appreciated.
Cheers, Harry
Support Kangaroo (joined March 2011) Likes (0)
Greetings Harry,
As I had mentioned before, this lead developer Moha is a very busy guy and in an attempt to expedite resolution of this ticket a bit I am going to see about getting @Jeffri in here who is a hot talented new theme developer of ours to see if he may be able to offer us a quick solution.
Cheers, Joe
Designer (joined July 2012) Likes (0)
Hi Harry,
Please try this one:
Notice that I removed space between .product and :hover. The .product:hover selector will target the .product element hover state, while .product :hover will target the hover state of every child element of .product, which could explain the issue you are having.
Hope this help you!
Thank you.
Jeffri
Support Kangaroo (joined March 2011) Likes (0)
Greetings Harry,
Looking forward to hearing back from you as to the resolve of this issue with the addition of Jeffri's coding above and explanation.
Please advise.
Cheers, Joe
Member (joined September 2011) Likes (0)
Thanks, I changed the design and went a slightly different hover effect.
Become a member