คำถามติดแท็ก hover

ผมต้องการที่จะเห็น:hoverสไตล์สมอฉันโฉบในChrome ในFirebugมีสไตล์แบบเลื่อนลงที่อนุญาตให้ฉันเลือกสถานะที่แตกต่างสำหรับองค์ประกอบ ฉันไม่พบสิ่งที่คล้ายกันใน Chrome ฉันพลาดอะไรไปรึเปล่า?

855 css  google-chrome  hover  state  google-chrome-devtools 

สิ่งที่ฉันต้องการจะทำคือเมื่อมีบางอย่างจะวนเวียนอยู่ก็ต้องการส่งผลกระทบต่อคุณสมบัติของผู้อื่นdivdiv ยกตัวอย่างเช่นในนี้สาธิต JSFiddleเมื่อคุณวางเมาส์เหนือ#cubeจะเปลี่ยนbackground-colorแต่สิ่งที่ฉันต้องการก็คือว่าเมื่อฉันวางเมาส์เหนือ#container, #cubeได้รับผลกระทบ div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } <div id="container"> <div id="cube"> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

459 html  css  hover 

ใน stackoverflow เมื่อเราวางตัวบนชื่อเสียงของผู้ใช้เราจะเห็นข้อความ ฉันเคยเห็นสิ่งนี้ในหลาย ๆ ที่และรหัสแหล่งที่มาบอกฉันว่ามันสามารถทำได้โดยไม่ต้อง js และฉันพยายามและได้รับสิ่งนี้เท่านั้น - <div="text">hover me</div>

262 html  hover 

ฉันสร้างเมนูแนวนอนโดยใช้รายการ HTML และ CSS ทุกอย่างทำงานได้ตามปกติยกเว้นเมื่อคุณวางเมาส์เหนือลิงก์ คุณเห็นไหมว่าฉันได้สร้างสถานะโฮเวอร์ตัวหนาสำหรับลิงก์และตอนนี้ลิงก์เมนูเปลี่ยนเนื่องจากขนาดตัวหนาแตกต่างกัน ฉันพบปัญหาเดียวกันกับโพสต์ SitePointนี้ อย่างไรก็ตามโพสต์ไม่มีทางออกที่เหมาะสม ฉันค้นหาวิธีแก้ปัญหาทุกที่และหาไม่พบ แน่นอนฉันไม่สามารถเป็นคนเดียวที่พยายามทำสิ่งนี้ ไม่มีใครมีความคิดใด ๆ PS: ฉันไม่รู้ความกว้างของข้อความในรายการเมนูดังนั้นฉันไม่สามารถกำหนดความกว้างของรายการ li ได้ .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: …

204 html  css  hover  text-size 

ในกรอบAngular2ใหม่ไม่มีใครรู้วิธีที่เหมาะสมในการทำโฮเวอร์เหมือนกับเหตุการณ์หรือไม่? ในAngular1นั้นมีอยู่ng-Mouseoverแต่ดูเหมือนจะไม่ถูกพาไป ฉันตรวจดูเอกสารแล้ว แต่ไม่พบอะไรเลย

198 javascript  angular  events  hover 

ฉันต้องการเพิกเฉยต่อ:hoverการประกาศ CSS ทั้งหมดหากผู้ใช้เยี่ยมชมเว็บไซต์ของเราผ่านอุปกรณ์สัมผัส เนื่องจาก:hoverCSS ไม่สมเหตุสมผลและยังอาจรบกวนได้หากแท็บเล็ตทริกเกอร์เมื่อคลิก / แตะเพราะอาจติดค้างจนองค์ประกอบสูญเสียโฟกัส พูดตามตรงฉันไม่รู้ว่าทำไมอุปกรณ์ระบบสัมผัสจึงรู้สึกว่าจำเป็นต้องกระตุ้น:hoverตั้งแต่แรก - แต่นี่คือความจริงดังนั้นปัญหานี้ก็เป็นความจริงเช่นกัน a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } ดังนั้น (วิธี) ฉันจะลบ / เพิกเฉยต่อ:hoverการประกาศCSS ทั้งหมดในครั้งเดียว (โดยไม่ต้องรู้แต่ละรายการ) สำหรับอุปกรณ์สัมผัสหลังจากที่มีการประกาศ

152 html  css  hover  touch 

ฉันมี CSS บางอย่างที่วางเมาส์บนเอฟเฟกต์การเปลี่ยน CSS จะย้าย div ปัญหาดังที่คุณเห็นในตัวอย่างคือการtranslateเปลี่ยนแปลงมีผลข้างเคียงที่น่ากลัวในการทำให้ภาพในการเลื่อน div เคลื่อนไหวโดย 1px ลง / ขวา (และอาจจะปรับขนาดเล็กน้อยเลยหรือ?) เพื่อให้ปรากฏออกนอกสถานที่และ ออกจากโฟกัส ... ความผิดพลาดดูเหมือนว่าจะนำมาใช้ตลอดเวลาที่ใช้เอฟเฟกต์โฮเวอร์และจากขั้นตอนการทดลองและข้อผิดพลาดฉันสามารถพูดได้อย่างปลอดภัยเท่านั้นดูเหมือนว่าจะเกิดขึ้นเมื่อการเปลี่ยนแปลย้าย div (เงากล่องและความทึบก็ใช้เช่นกัน ข้อผิดพลาดเมื่อลบออก) ปัญหาดูเหมือนจะเกิดขึ้นเฉพาะเมื่อเพจนั้นมีแถบเลื่อน ดังนั้นตัวอย่างที่มีเพียงอินสแตนซ์เดียวของ div จึงใช้ได้ แต่เมื่อมีการเพิ่ม div ที่เหมือนกันอีกครั้งและหน้าเว็บต้องการแถบเลื่อนปัญหาจะเกิดขึ้นอีกครั้ง ...

150 css  image  hover  positioning  translate-animation 

ฉันได้สร้างม้าหมุนที่มีปุ่มก่อนหน้าและปุ่มถัดไปที่สามารถมองเห็นได้เสมอ ปุ่มเหล่านี้มีสถานะโฮเวอร์พวกเขาเปลี่ยนเป็นสีน้ำเงิน บนอุปกรณ์ระบบสัมผัสเช่น iPad สถานะโฮเวอร์จะเหนียวดังนั้นปุ่มจะยังคงเป็นสีฟ้าหลังจากแตะ ฉันไม่ต้องการสิ่งนั้น ฉันสามารถเพิ่มno-hoverคลาสontouchendสำหรับแต่ละปุ่มและทำให้ CSS เป็นแบบนี้: button:not(.no-hover):hover { background-color: blue; }แต่มันอาจจะไม่ดีสำหรับประสิทธิภาพและไม่ได้จัดการอุปกรณ์เช่น Chromebook Pixel (ซึ่งมีทั้งหน้าจอสัมผัสและเมาส์) อย่างถูกต้อง ฉันสามารถเพิ่มtouchคลาสให้กับdocumentElementและทำให้ CSS ของฉันเป็นแบบนี้: html:not(.touch) button:hover { background-color: blue; }แต่มันก็ไม่ทำงานบนอุปกรณ์ที่มีทั้งการสัมผัสและเมาส์ ontouchendสิ่งที่ผมต้องการคือการเอารัฐเลื่อน แต่ดูเหมือนว่าจะเป็นไปไม่ได้ การมุ่งเน้นองค์ประกอบอื่นไม่ได้ลบสถานะโฮเวอร์ การแตะองค์ประกอบอื่นด้วยตนเองทำได้ แต่ฉันไม่สามารถเรียกใช้งานได้ใน JavaScript การแก้ปัญหาทั้งหมดที่ฉันพบดูเหมือนไม่สมบูรณ์ มีวิธีแก้ไขปัญหาที่สมบูรณ์แบบหรือไม่

144 javascript  css  hover  touch 

ในหลาย ๆ ไซต์เช่นhttp://www.clearleft.comคุณจะสังเกตเห็นว่าเมื่อลิงก์ถูกวางไว้เหนือลิงก์เหล่านี้จะจางหายไปเป็นสีที่แตกต่างกันเมื่อเทียบกับการเปลี่ยนทันทีซึ่งเป็นการกระทำเริ่มต้น ฉันคิดว่า JavaScript ใช้เพื่อสร้างเอฟเฟกต์นี้มีใครรู้บ้างไหม?

134 css  hover  fade  effect 

ฉันมีเว็บไซต์บางแห่งที่ฉันสร้างขึ้นเมื่อครั้งที่แล้วซึ่งใช้เหตุการณ์เมาส์ jquery ... ฉันเพิ่งได้รับ iPad และฉันสังเกตเห็นว่าการวางเมาส์เหนือเหตุการณ์ทั้งหมดได้รับการแปลเป็นคลิก ... ตัวอย่างเช่นฉันต้องทำการคลิกสองครั้งแทนการคลิกเพียงครั้งเดียว .. (การวางเมาส์ครั้งแรกมากกว่าการคลิกจริง) มีวิธีแก้ปัญหาพร้อมแก้ปัญหานี้หรือไม่ บางทีคำสั่ง jquery ที่ฉันใช้ shoudl แทน mouseover / out เป็นต้นขอบคุณ!

125 jquery  ipad  hover  mouseover 

ด้วย HTML บางอย่างเช่นนี้: <p>Some Text</p> จากนั้น CSS บางส่วนเช่นนี้: p { color:black; } p:hover { color:red; } ฉันจะอนุญาตให้อุปกรณ์ที่เปิดใช้งานระบบสัมผัสเป็นเวลานานเพื่อจำลองโฮเวอร์ซ้ำได้อย่างไร ฉันสามารถเปลี่ยนมาร์กอัป / ใช้ JS ฯลฯ ได้ แต่คิดวิธีง่ายๆในการทำเช่นนี้ไม่ได้

120 javascript  html  css  hover  touch 

มีวิธีใดบ้างที่จะตรงกันข้ามกับการ:hover ใช้ CSS เพียงอย่างเดียว ? ในขณะที่ถ้า:hoverเป็นon Mouse Enterจะมี CSS เทียบเท่ากับon Mouse Leave? ตัวอย่าง: ฉันมีเมนู HTML ที่ใช้รายการ เมื่อฉันโฉบหนึ่งในรายการที่มีภาพเคลื่อนไหวสี CSS จากไป#999 blackฉันสามารถสร้างผลในทางตรงกันข้ามเมื่อเมาส์ใบพื้นที่รายการที่มีภาพเคลื่อนไหวจากblackไป#999? jsFiddle (โปรดทราบว่าฉันไม่ต้องการตอบเฉพาะตัวอย่างนี้ แต่เป็นปัญหา "ตรงข้าม:hover" ทั้งหมด)

116 css  hover 

ฉันกำลังเขียนเว็บไซต์ที่ตั้งใจจะใช้ทั้งจากเดสก์ท็อปและแท็บเล็ต เมื่อมีการเยี่ยมชมจากเดสก์ท็อปฉันต้องการให้พื้นที่ที่คลิกได้ของหน้าจอสว่างขึ้นพร้อมเอ:hoverฟเฟกต์ (สีพื้นหลังที่แตกต่างกัน ฯลฯ ) เมื่อใช้แท็บเล็ตไม่มีเมาส์ดังนั้นฉันจึงไม่ต้องการเอฟเฟกต์แบบโฮเวอร์ใด ๆ ปัญหาคือเมื่อฉันแตะอะไรบางอย่างบนแท็บเล็ตเบราว์เซอร์จะมี "เคอร์เซอร์ของเมาส์ที่มองไม่เห็น" บางชนิดซึ่งย้ายไปยังตำแหน่งที่ฉันแตะแล้วปล่อยไว้ที่นั่นดังนั้นสิ่งที่ฉันเพิ่งแตะจะสว่างขึ้นพร้อมกับ เลื่อนเอฟเฟกต์จนกว่าฉันจะแตะอย่างอื่น ฉันจะรับเอฟเฟกต์โฮเวอร์ได้อย่างไรเมื่อฉันใช้เมาส์ แต่กดปุ่มเหล่านี้เมื่อฉันใช้หน้าจอสัมผัส ในกรณีที่มีคนคิดจะแนะนำฉันไม่ต้องการใช้การดมกลิ่นของตัวแทนผู้ใช้ อุปกรณ์เดียวกันอาจมีทั้งหน้าจอสัมผัสและเมาส์ (อาจจะไม่ธรรมดาในปัจจุบัน แต่มีอีกมากมายในอนาคต) ฉันไม่สนใจอุปกรณ์นี้ฉันสนใจวิธีการใช้งาน: เมาส์หรือหน้าจอสัมผัส ฉันพยายามแล้ว hooking touchstart, touchmoveและtouchendเหตุการณ์ที่เกิดขึ้นและเรียกpreventDefault()ทั้งหมดของพวกเขาซึ่งจะปราบ "การเคอร์เซอร์ของเมาส์ที่มองไม่เห็น" บางส่วนของเวลา; แต่ถ้าฉันแตะอย่างรวดเร็วไปมาระหว่างสององค์ประกอบที่แตกต่างกันหลังจากแตะสองสามครั้งมันจะเริ่มขยับ "เคอร์เซอร์ของเมาส์" และทำให้เอฟเฟกต์โฮเวอร์สว่างขึ้น - มันเหมือนกับว่าฉันpreventDefaultไม่ได้รับเกียรติเสมอไป ฉันจะไม่เบื่อคุณด้วยรายละเอียดเว้นแต่จำเป็น - ฉันไม่แน่ใจด้วยซ้ำว่านั่นเป็นแนวทางที่ถูกต้อง ถ้าใครมีวิธีแก้ไขที่ง่ายกว่านี้ฉันหูแว่ว แก้ไข:สิ่งนี้สามารถทำซ้ำได้ด้วย CSS มาตรฐานปลอม:hoverแต่นี่เป็นคำอธิบายสั้น ๆ สำหรับการอ้างอิง <style> .box { border: 1px solid black; width: 150px; height: 150px; …

113 javascript  hover  touch 

ฉันพยายามดูผ่านเครื่องมือสำหรับนักพัฒนาของ Chrome ว่าคำแนะนำเครื่องมือมีโครงสร้างอย่างไรบนไซต์ อย่างไรก็ตามแม้ว่าฉันจะวางเมาส์เหนือรายการนั้น แต่เมื่อฉัน "ตรวจสอบองค์ประกอบ" ก็ไม่มีสิ่งใดแสดงสำหรับคำแนะนำเครื่องมือใน html ฉันรู้ว่าฉันสามารถตั้งค่ารูปแบบเป็น:hoverได้ แต่ฉันยังไม่เห็น html หรือ css ของคำแนะนำเครื่องมือ ความคิดใด ๆ ?

107 html  css  hover  google-chrome-devtools 

ฉันมีชุดของ<a>แท็กที่มีสีพื้นหลัง rgba ต่างกัน แต่เป็นอัลฟ่าเดียวกัน เป็นไปได้ไหมที่จะเขียนสไตล์ css เดียวที่จะเปลี่ยนเฉพาะความทึบของแอตทริบิวต์ rgba ตัวอย่างสั้น ๆ ของรหัส: <a href="#"><img src="" /><div class="brown">Link 1</div></a> <a href="#"><img src="" /><div class="green">Link 2</div></a> และรูปแบบต่างๆ a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} สิ่งที่ฉันต้องการจะทำคือเขียนสไตล์เดียวที่จะเปลี่ยนความทึบเมื่อ<a>วางเมาส์เหนือ แต่ให้สีไม่เปลี่ยนแปลง สิ่งที่ต้องการ a:hover .green, a:hover .brown …

102 css  hover  background-color  rgba