สีพื้นหลัง div เพื่อเปลี่ยนเมื่อใดก็ตาม

Question 1

ฉันพยายามที่จะทำให้การเปลี่ยนสีพื้นหลังของ div บนเมาส์มากกว่า

div {background: white;}
the div a: hover {background: grey; ความกว้าง: 100%;
แสดง: บล็อก; ตกแต่งข้อความ: ไม่มี;}

เพียงการเชื่อมโยงภายใน div ที่ได้รับสีพื้นหลัง

ฉันจะทำอย่างไรให้div ทั้งหมดได้สีพื้นหลังนั้น

ขอบคุณ

แก้ไข:
ฉันจะทำให้ div ทั้งหมดทำหน้าที่เป็นลิงก์ได้อย่างไร - เมื่อคุณคลิกที่ใดก็ได้บน div นั้นเพื่อนำคุณไปยังที่อยู่

Question 2

" a:hover" จะบอกให้เบราว์เซอร์เปลี่ยนคุณสมบัติของ<a>-tag อย่างแท้จริงเมื่อวางเมาส์ไว้เหนือแท็ก สิ่งที่คุณอาจหมายถึงคือ " the div:hover" แทนซึ่งจะเริ่มทำงานเมื่อมีการเลือก div

เพื่อให้แน่ใจว่าหากคุณต้องการเปลี่ยน div เพียงรายการเดียวให้ระบุ id (" <div id='something'>") และใช้ CSS " #something:hover {...}" แทน หากคุณต้องการแก้ไขกลุ่มของ div ให้สร้างเป็นคลาส (" <div class='else'>") และใช้ CSS " .else {...}" ในกรณีนี้ (สังเกตช่วงเวลาก่อนชื่อคลาส!)

Question 3

ใช้ Javascript

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 
    </div>

Question 4

ไม่จำเป็นต้องใส่สมอ หากต้องการเปลี่ยนรูปแบบของ div เมื่อวางเมาส์เหนือแล้วเปลี่ยนสีพื้นหลังของ div เมื่อวางเมาส์เหนือ

<div class="div_hover"> Change div background color on hover</div>

ในหน้า. css

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

Question 5

ในการทำให้ div ทั้งหมดทำหน้าที่เป็นลิงก์ให้ตั้งค่า anchor tag เป็น:

display: block

และตั้งค่าความสูงของแท็กจุดยึดเป็น 100% จากนั้นตั้งค่าความสูงคงที่ให้กับแท็ก div ของคุณ จากนั้นจัดรูปแบบแท็กจุดยึดของคุณตามปกติ

ตัวอย่างเช่น:

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

โชคดี!

Question 6

รหัส html:

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

รหัส css:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

และนั่นคือวิธีที่คุณจะเปลี่ยน div จากสีแดงเป็นสีน้ำเงินโดยการวางเมาส์เหนือมัน

Question 7

ชุด

display: block;

ในและให้ความสูงบาง

Question 8

เพียงแค่ลอง "โฮเวอร์" คุณสมบัติของ CSS เช่น:

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

ฉันหวังว่านี่จะช่วยได้

Question 9

คุณสามารถใส่จุดยึดรอบ div

<a class="big-link"><div>this is a div</div></a>

แล้ว

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

Question 10

คุณสามารถใส่ div ในแท็ก anchor ได้ดังนี้:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>

ขยายข้อมูลโค้ด

Question 11

เพียงแค่สร้างคุณสมบัติ!importantในไฟล์ css ของคุณเพื่อให้สีพื้นหลังไม่เปลี่ยนเมื่อวางเมาส์สิ่งนี้ได้ผลสำหรับฉัน

ตัวอย่าง:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}