0

.element {
  border-radius: 15px;
  position: absolute;
  transition: box-shadow 0.5s;
}
.element:hover {
  box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}
<div class="element" style="width: 100px; height: 50px;"></div>

This code works perfectly in Chrome and IE 11, BUT when I use this code in SharePoint, the IE does not detect the hover-event. Chrome does. Only when the div has a background color, the IE detects the event. Does anyone know why?!

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Joel
  • 9
  • 3
  • 1
    check http://stackoverflow.com/questions/2201736/css-hover-in-sharepoint-works-in-chrome-but-not-ie8-or-7-compat – Aytee Oct 25 '16 at 12:38
  • 1
    Yup. Sharepoint's CSS might be overriding yours considering your using IE>9. Check this SO for any possible answers - http://stackoverflow.com/questions/6379994/css-hover-codes-mysteriously-not-working-in-sharepoint-page – Nikhil Nanjappa Oct 25 '16 at 12:39
  • I'd actually be fine with using `!important` here. – roberrrt-s Oct 25 '16 at 12:40
  • I tried everything mentioned and nothing really works... even to jQuery method "hover()" only works when the div has a background color. Why does it work with a background color defined?! – Joel Oct 25 '16 at 13:13
  • Is this SharePoint 2010 or 2013? – Thriggle Oct 25 '16 at 14:29
  • It's SharePoint 2013 – Joel Oct 25 '16 at 17:26

2 Answers2

0

The box-shadow property has support from IE9. Please check for the CSS property browser support.

Satheesh Kumar
  • 2,205
  • 1
  • 16
  • 31
  • The IE 9 supports it and it works in a test html page I made, but it doesn't work in SharePoint... – Joel Oct 25 '16 at 13:08
  • There has an some restrictions for border-radius, box-shadow in share point . Try this I have referred from another site. They mentioned that we need to add this meta tag to specify the browser compatibility for sharepoint. – Satheesh Kumar Oct 25 '16 at 13:19
  • I have not the problem, that the box-shadow doesn't work (that works fine), the problem I have is, that the IE ignores the hover-event if the div doesn't have a background... Everything works when I define a background color. – Joel Oct 25 '16 at 13:32
-1

Use css prefix click here for link which will help you. here is basic list.

  • -moz- (Firefox)
  • -o- (Opera)
  • -ms- (Internet Explorer)
  • -webkit- (Safari, Chrome)

also consider for use higher version of IE for future development very less people use it nowadays if you have any new difficulty in new version you do not have to think about too much for it , its Microsoft fault they doing things way different than Open Source world.

Community
  • 1
  • 1
Sidhharth Gupta
  • 11
  • 3
  • and isn't IE 11 the latest version? – Joel Oct 25 '16 at 13:23
  • than as i said you can loose it, and go for next thing if its does not have standard solution than its does not need to be worry about, by doing this you will save so much time and effort in your carrier. use another browser and recommended people to use another browser. – Sidhharth Gupta Oct 25 '16 at 13:35
  • Unfortunately, it has to work on IE... but I think you're right... I should look for another solution. – Joel Oct 25 '16 at 13:48