css の border に対して hover 時のみ色変更がしたい

css
1.out_frame {
2    margin: 2px 5px 2px 5px;
3    padding: 2px 4px 2px 4px;
4    width: 90%;
5    border: 10px solid #008b8b;
6    border-radius: 5px;
7}
8.out_frame:hover {
9    border: 10px solid #7cfc00;
10}
11

HTML
1<div class="out_frame">
2    <div class="frame_inside">
3        <p>コンテンツ</p>
4    </div>
5</div>

ボーダー上にマウスカーソルがあるとき「だけ」色変更が行いたいです
「:hover」を付けて色変更は行えましたが、内部の要素上にあるときにも色変更が行われてしまいます。
CSS のみでは不可能でしょうか？　JS を使わないと無理なのでしょうか？

m.ts10806

2022/01/10 09:38

>JS を使わないと無理なのでしょうか？ JavaScriptを利用しても「JavaScriptを介してCSS（もしくはstyle）を付与する」形になるので、結局CSS必要です。

hiro114

2022/01/11 03:37

ありがとうございます色々ためしてみます

行動規範の内容に同意します

回答1件

ベストアンサー

javascriptで、内側の要素に乗った時にborder色を元に戻す処理を追加でしょうか。

javascript
1const outFr = document.querySelector(".out_frame");
2const insFr = document.querySelector(".frame_inside");
3
4outFr.addEventListener("mouseover", () => {
5  console.log("outFr mouseover");
6  outFr.classList.add("hover");
7});
8
9insFr.addEventListener("mouseover", (e) => {
10  console.log("infFr mouseover");
11  outFr.classList.remove("hover");
12  e.stopPropagation();
13});
14
15outFr.addEventListener("mouseout", () => {
16  console.log("outFr mouseout");
17  outFr.classList.remove("hover");
18});

css
1*{
2  box-sizing:border-box;
3}
4.out_frame {
5  margin: 2px 5px 2px 5px;
6  width: 90%;
7  border: 10px solid #008b8b;
8  border-radius: 5px;
9}
10.out_frame.hover {
11  border: 10px solid #7cfc00;
12}
13.frame_inside {
14  padding: 2px 4px 2px 4px;
15  height: 100%;
16  width: 100%;
17  background: #fff;
18}
19