CSS-коды при наведении мыши загадочно не работают на странице SharePoint - PullRequest
Новая
       2

CSS-коды при наведении мыши загадочно не работают на странице SharePoint

1 голос
/ 17 июня 2011

У меня проблемы с SharePoint и CSS. Я создаю страницу с предположительно простой вкладкой изображения, которая имеет эффект наведения. Это сделано полностью в CSS. Вот фрагмент кода CSS (размещенный в отдельном файле CSS): 

div.activelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }

div.activelayer:hover { 
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left; 
            }           

div.inactivelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }           

div.selectedlayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }       

div.selectedlayer:hover {   
    background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");   
    cursor: text;
            }   

#innertab .alink {
                margin-top:18px;
                text-align:center;
                margin-left:0px;
}   

#innertab a.tablink {
                color: #ffffff;
                text-align: center;
}   

#innertab a.tablink:hover {
                text-decoration: none;
                color: #ffffff; 
                text-align: center;         
}   


/* IDs */

#menu1 {
    z-index:10;
    }
#menu2 {
    z-index:9;
    }
#menu3 {
    z-index:8;
    }
#menu4 {
    z-index:7;
    }
#menu5 {
    z-index:6;
    }

На странице aspx у меня есть это: 

        <div id="innerTab" class="" style="width: 1000px; height: 72px;">
                    <div id="menu1" class="selectedlayer" style="margin-left:0px">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem1">Menu Item 1</a>
                      </div>
                    </div>
                    <div id="menu2" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem2">Menu Item 2</a>
                      </div>
                    </div>
                    <div id="menu3" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem3">Menu Item 3</a>
                      </div>
                    </div>
                    <div id="menu4" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem4">Menu Item 4</a>
                      </div>
                    </div>
                    <div id="menu5" class="inactivelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem5">Menu Item 5</a>
                      </div>
                    </div>              
        </div>

Проблема, с которой я сталкиваюсь, заключается в следующем: это не работает, когда я помещаю это в SharePoint при просмотре в IE.

Сначала я проверил этот код на обычной HTML-странице, и в IE он работал как прелесть. Когда я перенес коды в SharePoint (это шаблон страницы), это не сработало. Итак, я просмотрел тестовую страницу SharePoint в Chrome, и она там работает, но по какой-то действительно странной причине она не работает для IE. Я не проверял в других браузерах, и я не планирую, потому что страница, над которой я работаю, является сайтом интрасети, и наша компания использует IE (официально, хотя некоторые из нас настаивают на использовании Chrome или FireFox). ) так что совместимость с IE - мой единственный приоритет.

Есть что-то, что я пропустил в коде? Пожалуйста, помогите: (

Да, кстати, я кодирую в MOSS2007, а коды HTML используются в шаблоне страницы. Моя версия IE - IE8. Не уверен, что эта информация имеет отношение к моей проблеме, хотя: (

спасибо,

Poch

Ответы [ 3 ]

1 голос
/ 17 июня 2011

Таблицы стилей Sharepoint переопределяют ваши, поэтому вы должны сделать свои селекторы сильнее. Откройте инструменты разработчика (нажмите f12), выберите «Стили трассировки» над правой панелью. Выберите свой элемент, к которому не применяются его стили, и проверьте, кто эти стили. Затем просто скопируйте этот селектор и сделайте свой немного сильнее. Например, вы можете увидеть:

margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px

Вы просто изменили бы свой селектор на это:

.someClass .someOtherClass #someId #innertab a.alink

Ваш селектор теперь сильнее и будет применяться.

0 голосов
/ 25 марта 2014

У меня была похожая проблема с этим несколько недель назад.Я не смог найти точный ресурс, который сказал бы это, но методом проб и ошибок я смог обнаружить, что я могу применять классы CSS Psuedo (например, :hover и :active) к <a> тегам в SharePoint при просмотре вIE.Код, который вы разместили выше, имеет :hover / :active на <div> тегах.

Мне удалось получить рабочее решение, используя спрайты изображений , стилизацию тегов привязки и вложение спрайта изображения в теги <a> с использованием следующих HTML и CSS:

HTML 

<ul id="wheel" class="wheel"><li>
<a href="#"><img src="images1/design.png"></a></li>
</ul>

CSS 

.wheel li a, .wheel li a:visited{
  width: 50px;
  height: 50px;
  overflow: hidden; 
}

.wheel li img
{
      position: relative;
      display: block;
}

.wheel a:hover img{
      left: -51px;
}

.wheel a:active img{
      left: -102px;
}

Возможно, вы не решили эту проблему, надеюсь, этопомогает!

0 голосов
/ 17 июня 2011

Попробуйте добавить! Важный, вот так: 

div.activelayer {
                margin-left:-30px!important;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
                text-align:center!important;
                height:55px!important;
                width:200px!important;
                display:inline-block!important;
                position:relative!important;
                float:left!important;
            }
...