今日係公司最後一日，前後一個月嘅不被信任生涯(?)終於完結。
進入話題先。今日最後幫公司更新咗首頁，發現CSS有一個位係無辦法達成...
HTML:
<div class="col-4 portal-box p-0">
<a href="{{ route('website.school.index') }}">
<img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
<h1 class="position-absolute portal-image-name text-center">學校管理</h1>
</a>
</div>
<a href="{{ route('website.school.index') }}">
<img src="{{ asset('images/portal-school-image.jpg') }}" class="d-block mx-auto portal-image" />
<h1 class="position-absolute portal-image-name text-center">學校管理</h1>
</a>
</div>
SASS:
.portal-box {
.portal-image {
width: 100%;
&:hover {
opacity: 0.2;
+.portal-image-name {
z-index: 2;
}
}
}
.portal-image-name {
width: 100%;
bottom: 0;
color: #000000;
z-index: -1;
&:hover {
+.portal-image {
opacity: 0.2;
}
}
}
}
.portal-image {
width: 100%;
&:hover {
opacity: 0.2;
+.portal-image-name {
z-index: 2;
}
}
}
.portal-image-name {
width: 100%;
bottom: 0;
color: #000000;
z-index: -1;
&:hover {
+.portal-image {
opacity: 0.2;
}
}
}
}
呢個位係當mouse移入張圖嗰陣就會淡化張圖並且會令遮住咗嘅字浮現出黎。問題係當滑鼠指向啲字嘅時候，張圖唔識得淡化......無理由架，明明我已經整咗會淡出架喎？
Compiled CSS:
Compiled CSS:
.portal-box .portal-image-name:hover + .portal-image {
opacity: 0.2;
}
opacity: 0.2;
}
然後我就去搵關於CSS Adjacent Siblings Selectors嘅嘢，發現我一直誤解佢同CSS General Siblings Selectors嘅用法...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector
最後唯有用jQuery達到效果...
https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector
最後唯有用jQuery達到效果...
Javascript:
$(document).ready(() => {
$('.portal-image').on('mouseenter', function() {
$(this).css('opacity', '0.2');
$(this).siblings('.portal-image-name').css('z-index', '2');
});
$('.portal-image').on('mouseleave', function() {
$(this).css('opacity', '1.0');
$(this).siblings('.portal-image-name').css('z-index', '-1');
});
$('.portal-image-name').on('mouseenter', function() {
$(this).siblings('.portal-image').css('opacity', '0.2');
$(this).css('z-index', '2');
});
$('.portal-image-name').on('mouseleave', function() {
$(this).siblings('.portal-image').css('opacity', '1.0');
$(this).css('z-index', '-1');
});
});
$('.portal-image').on('mouseenter', function() {
$(this).css('opacity', '0.2');
$(this).siblings('.portal-image-name').css('z-index', '2');
});
$('.portal-image').on('mouseleave', function() {
$(this).css('opacity', '1.0');
$(this).siblings('.portal-image-name').css('z-index', '-1');
});
$('.portal-image-name').on('mouseenter', function() {
$(this).siblings('.portal-image').css('opacity', '0.2');
$(this).css('z-index', '2');
});
$('.portal-image-name').on('mouseleave', function() {
$(this).siblings('.portal-image').css('opacity', '1.0');
$(this).css('z-index', '-1');
});
});
南無。