Как я могу повлиять на стиль предыдущегоSibling на событие onmouseover.CSS или JavaScript - PullRequest
Новая
       18

Как я могу повлиять на стиль предыдущегоSibling на событие onmouseover.CSS или JavaScript

0 голосов
/ 17 октября 2018

Я создал карту, используя встроенный SVG.Каждый район загорается при наведении (решается с помощью CSS).Чего я хочу добиться, так это того, чтобы при названии соответствующего округа загорелся район.

Я не смог добиться этого с помощью CSS3, поскольку в нем нет предыдущего селектора Сиблинга.Я также не мог изменить структуру разметки, чтобы район шел после заголовка.Зачем?потому что тогда текст находится за районом.(Использование z-index тоже не сработало.)

Затем я надеялся найти решение с использованием Javascript, используя событие onmouseover для запуска функции, которая бы использовала предыдущий элемент текущего текста, чтобы изменить его стиль..

Часть моей разметки: 

<path class="district-map" d="M264.741,21.661,323.1,155.235l179.3,85.439L496.992,21.661Z" transform="translate(-21 7)"/>
<text onmouseover="myFunction()" class="district-text" transform="translate(349 99)">
    <tspan x="0" y="0">District 5</tspan>
</text>

Здесь CSS: 

path.district-map {
    fill: green;
}
path.district-map:hover {
    fill: white;
}

Наконец-то JavaScript: 

function myFuntion() {
    var district = this.previousSibling;
    district.style.fill = "#fff";
}

Ссылка на мой кодовый блок

Что мне здесь не хватает, что не работает правильно?(Кстати, я полный нуб на JavaScript)

Спасибо за ваш вклад.

Полный фрагмент: 

<html>
<head>
    <style>
        svg {
            width: 100%;
            height: 100%;
    max-width: 500px;
    max-height: 500px;
    display: block;
    margin: auto;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
        <defs>
            <style>
              path.district-map {
                    fill: #00ff90;
                    transition: fill 0.2s;
                }
                path.district-map:hover {
                    fill: #fff;
                }
                .district-text {
                    fill: #5b5b5b;
                    font-size: 20px;
                    font-family: SegoeUI, Segoe UI;
                }
                .container  {
                    fill: #d1d1d1;
                }
            </style>
            <script>
              function myFuntion() {
                 var district = this.previousSibling;
                 district.style.fill = "#fff";
}
            </script>
        </defs>
            <rect class="container" width="500" height="500"/>

            <path class="district-map" d="M264.741,21.661,323.1,155.235l179.3,85.439L496.992,21.661Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(349 99)"><tspan x="0" y="0">District 5</tspan></text>

            <path class="district-map" d="M51.745,21.661V149.82l108.9,95.668L272.563,94.465l-28.279-72.8Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(87 112)"><tspan x="0" y="0">District 4</tspan></text>

            <path class="district-map" d="M51.745,179.3l100.481,81.227L131.167,289.41l178.1,187.124H51.745Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(75 414)"><tspan x="0" y="0">District 3</tspan></text>

            <path class="district-map" d="M429,217.81l75.812,43.321v210.59l-181.107,3.61L297.232,442.84Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(374 379)"><tspan x="0" y="0">District 2</tspan></text>

            <path class="district-map" d="M284,109.507,155.235,285.2,291.817,427.8l125.752-216-107.1-49.338Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(226 272)"><tspan x="0" y="0">District 1</tspan></text>
    </svg>
</body>

Ответы [ 3 ]

0 голосов
/ 17 октября 2018

Я рекомендую решение с CSS от @skobaljic, но если вы действительно хотите использовать js, следующий пример кода: 

const textElement = document.querySelector('.district-text');
textElement.addEventListener('mouseover', e => {
    e.target.parentNode.previousSibling.previousSibling.style.fill = '#fff';
});
textElement.addEventListener('mouseout', e => {
    e.target.parentNode.previousSibling.previousSibling.style.fill = '#00ff90';
});
0 голосов
/ 17 октября 2018

Думаю, ни одно из предложенных решений не работает.Вам необходимо установить обработчики событий мыши на основных фрагментах карты, чтобы они изменили атрибуты пути и текста.Вот так: 

window.onload=function () {
    var districts = document.getElementsByClassName("district-map");
    console.log(districts);

    var overAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#fff";
        disctrictText.style.fill = "#f00";
    }

    var outAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#00ff90";
        disctrictText.style.fill = "#000";
    }

    for (var i=0; i < districts.length; i++) {
        districts[i].onmouseover = overAction;
        districts[i].onmouseout = outAction;
    }
}

https://codepen.io/anon/pen/xyYder

И удалите: hover css.

- РЕДАКТИРОВАТЬ: -

Вызов.Ошибка nextSibling, потому что каким-то образом она обернута в другой элемент-призрак ... отсюда и вызов .nextSibling.nextSibling.

0 голосов
/ 17 октября 2018

Просто сгруппируйте / оберните район + текст, используя элемент SVG <g> ( подробнее об этом ), чем измените CSS, чтобы реагировать на наведение группы: 

<html>
	<head>
		<style>
			svg {
				width: 100%;
				height: 100%;
        max-width: 500px;
        max-height: 500px;
        display: block;
        margin: auto;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
			<defs>
				<style>
					path.district-map {
						fill: #00ff90;
						transition: fill 0.2s;
					}
					g:hover path.district-map {
						fill: #fff;
					}
					.district-text {
						fill: #5b5b5b;
						font-size: 20px;
						font-family: SegoeUI, Segoe UI;
					}
					.container  {
						fill: #d1d1d1;
					}
					
				</style>
			</defs>
				<rect class="container" width="500" height="500"/>
				
        <g>
				<path class="district-map" d="M264.741,21.661,323.1,155.235l179.3,85.439L496.992,21.661Z" transform="translate(-21 7)"/>
				<text class="district-text" transform="translate(349 99)"><tspan x="0" y="0">District 5</tspan></text>
      </g>
				
			<g>	
      <path class="district-map" d="M51.745,21.661V149.82l108.9,95.668L272.563,94.465l-28.279-72.8Z" transform="translate(-21 7)"/>
				<text class="district-text" transform="translate(87 112)"><tspan x="0" y="0">District 4</tspan></text>
      </g>
				
				<g>
          <path class="district-map" d="M51.745,179.3l100.481,81.227L131.167,289.41l178.1,187.124H51.745Z" transform="translate(-21 7)"/>
				<text class="district-text" transform="translate(75 414)"><tspan x="0" y="0">District 3</tspan></text>
      </g>
				
				<g>
          <path class="district-map" d="M429,217.81l75.812,43.321v210.59l-181.107,3.61L297.232,442.84Z" transform="translate(-21 7)"/>
				<text class="district-text" transform="translate(374 379)"><tspan x="0" y="0">District 2</tspan></text>
      </g>
				
				<g>
          <path class="district-map" d="M284,109.507,155.235,285.2,291.817,427.8l125.752-216-107.1-49.338Z" transform="translate(-21 7)"/>
				<text class="district-text" transform="translate(226 272)"><tspan x="0" y="0">District 1</tspan></text>
      </g>
      
		</svg>
	</body>
</html>

Обновлено PEN .

Элемент <g> SVG - это контейнер, используемый для группировки других элементов SVG.

...