Проблема заключается в том, что вы поворачиваете элемент, состояние :hover
выходит из строя, потому что оно вращается и выходит из состояния зависания.
Поверните элемент a
внутри него, а не фактический элемент :
.social-icons-inner:hover .social-icons-image:nth-child(3) a {...}
https://jsfiddle.net/oxe6jg1L/27/
.social-icons {
margin: 0 auto;
width: 640px;
height: 128px;
position: relative;
}
.social-icons .social-icons-image {
display: inline-block;
position: absolute;
width: 33%;
height: auto;
z-index: 2;
opacity: 1;
transition: all .5s;
padding: 2%;
box-sizing: border-box;
}
.social-icons .social-icons-image a {
display: inline-block;
width: 100%;
height: 100%;
}
.social-icons img {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.social-icons a:hover img {
width: 110%;
height: auto;
margin: -5%;
}
.social-icons .social-icons-image:nth-child(1) {
left: 33.755%; /*(nth-child(2).left - (50% * 20%)/4)*/
top: 25%; /*((100%-50%)/2)*/
z-index: 0;
width: 10%; /*(50% * 20%)*/
height: auto;
opacity: .5;
}
.social-icons .social-icons-image:nth-child(2) {
left: 36.25%; /*(40% - (75% * 20%)/4)*/
top: 12.5%; /*((100%-75%)/2)*/
z-index: 1;
width: 15%; /*(75% * 20%)*/
height: auto;
opacity: .75;
}
.social-icons .social-icons-image:nth-child(3) {
left: 40%;
z-index: 2;
width: 20%;
height: auto;
}
.social-icons .social-icons-image:nth-child(4) {
left: 48.75%; /*(60% - 3*(75% * 20%)/4*/
top: 12.5%; /*((100%-75%)/2)*/
z-index: 1;
width: 15%; /*(75% * 20%)*/
height: auto;
opacity: .75;
}
.social-icons .social-icons-image:nth-child(5) {
left: 56.25%; /*(nth-child(4).left + (nth-child(4).width- 3*(50% * 20%)/4)*/
top: 25%; /*((100%-50%)/2)*/
z-index: 0;
width: 10%; /*(50% * 20%)*/
height: auto;
opacity: .5;
}
.social-icons-inner:hover .social-icons-image:nth-child(1) {
top: 0px;
left: 0%;
width: 20%;
opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(2) {
top: 0px;
left: 20%;
width: 20%;
opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(3) a{
top:0;
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
transform-style: preserve-3d;
opacity:1;
-webkit-transition: opacity 1s ease-in-out,
-webkit-transform 1s ;
transition: opacity 1s ease-in-out,
-webkit-transform 1s ;
transition: transform 1s,
opacity 1s ease-in-out;
transition: transform 1s,
opacity 1s ease-in-out,
-webkit-transform 1s;
}
.social-icons-inner:hover .social-icons-image:nth-child(3).active {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(4) {
top: 0px;
left: 60%;
width: 20%;
opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(5) {
top: 0px;
left: 80%;
width: 20%;
opacity: 1;
}
Непонятно, как вы создаете и показываете AddNewsWindow
. Возможно, вы сможете передать MainWindow
в AddNewsWindow
(через this
):
var addNewsWindow = new AddNewsWindow(this);
MainWindow
может определить метод обновления документа:
Затем из AddNewsWindow
вы можете позвонить:
mainWindow.SetDocument(xpsDocument);
В качестве альтернативы, вместо передачи MainWindow
в AddNewsWindow
, вы сможете получить MainWindow
непосредственно:
var mainWindow = (MainWindow)Application.Current.MainWindow;
Причина, по которой вам нужно разыграть это, заключается в том, что Application.Current.MainWindow
возвращает экземпляр Window
, а не ваш MainWindow
. Вам понадобится MainWindow
для вызова его метода SetDocument
.