Question

我有以下html：

div.tabHdr {
   border-width: 1px;
   border-style: solid;
   margin-right: 5px;
   border-color: #ddd #ddd transparent;
   padding: 10px; 15px;
   width: auto;
 }

 div.activeHdr {
    background: #FFF;
    color: #555;
 
 }

 div.inactiveHdr {
    background: #FFF;
 }

 .inactiveHdr a:hover {
    background: #eee;
    text-decoration: none; 
 }

<div class="tabHdr inactiveHdr">
   <a href="/" title="">my link</a>
</div>

当我将鼠标悬停在链接上时，只有链接周围的背景会改变颜色，但我希望整个标签背景发生变化。我怎样才能做到这一点？

Answer 1

尝试更改

 .inactiveHdr a:hover {

要

 .inactiveHdr:hover {

编辑，如果您要删除链接上的自然下划线，则需要保留：

.inactiveHdr a:hover {
   text-decoration:none;
}

Answer 2

只需将hover移至包含div：

即可

.tabHdr:hover {
    background: #eee;
    text-decoration: none; 
}

Answer 3

当孩子悬停时，父母也处于悬停状态

.inactiveHdr:hover {
    background: #eee;
}

但现在当你悬停标签但没有悬停链接时，你无法点击链接，所以我建议删除外部div并将链接显示更改为

display: block;

像这个小提琴一样： https://jsfiddle.net/45nmv9zw/

Answer 4

尝试使用此代码段

.inactiveHdr:hover {
    background: #eee;
 }
 .inactiveHdr:hover a {
    text-decoration: none; 
 }

＆＃13;

div.tabHdr {
   border-width: 1px;
   border-style: solid;
   margin-right: 5px;
   border-color: #ddd #ddd transparent;
   padding: 10px; 15px;
   width: auto;
 }

 div.activeHdr {
    background: #FFF;
    color: #555;

 }

 div.inactiveHdr {
    background: #FFF;
 }

 .inactiveHdr:hover {
    background: #eee;
 }
  .inactiveHdr:hover a {
    text-decoration: none; 
 }

＆＃13;

<div class="tabHdr inactiveHdr">
   <a href="/" title="">my link</a>
</div>

＆＃13;

Answer 5

替换

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\VideoLog;

class VideoController extends Controller
{
    private $user_id;

    public function __construct(Request $request)
    {
        $user_id = session('id');
        $this->user_id = $user_id;
    }

    public function log_watched(Request $request)
    {
        dd($this->user_id);

        // See If Video Has Been Watched Before....
        $video_watched = VideoLog::where('user_id', $this->user_id);
    }
}

而不是

div.tabHdr:hover {
 background: #eee;
 text-decoration: none; 
}

CSS - 将背景颜色应用于选项卡

5 个答案: