1016

ฉันมีกรณีที่ฉันต้องเขียนโค้ด CSS แบบอินไลน์และฉันต้องการที่จะใช้สไตล์โฉบบนสมอ

ฉันจะใช้a:hoverinline CSS ภายในแอตทริบิวต์สไตล์ HTML ได้อย่างไร

เช่นคุณไม่สามารถใช้คลาส CSS ในอีเมล HTML ได้อย่างน่าเชื่อถือ

html css inline-styles

24

การฝัง html ลงในแอปพลิเคชันบล็อกมักจะต้องใช้สไตล์อินไลน์อย่างพิเศษ โดยเฉพาะอย่างยิ่งถ้าคุณฝัง html ผ่านไคลเอนต์ของบุคคลที่สามและไม่สามารถเข้าถึงชุดรูปแบบของผู้ใช้

— รอบคอบ

8

มีมาตรฐาน CSS ที่เสนอสำหรับสิ่งนี้ ไม่รู้เลยว่ามันรองรับเบราว์เซอร์ประเภทใด (คำใบ้: พวกเขาสามารถใช้แท็กที่กำหนดเองเช่น-moz

— Kato

1

เป็นไปได้ที่ซ้ำกันของเป็นไปได้ที่จะสร้างรูปแบบหลอกแบบอินไลน์หรือไม่?

— Synetech

17

เข้ามา. บางครั้งคุณแค่สร้างต้นแบบหน้า Landing Page และคุณไม่ต้องการแยกสไตล์ชีตหรือสร้างเทมเพลตสาขาใหม่หรืออะไรก็ตามที่จะทดสอบว่าปุ่มสีเขียวทำงานได้ดีขึ้นหรือไม่ Sheesh

— ElBel

1

@FriendlyNe NeighborhoodIdiot หน้านี้มีอายุ 13 ปีแบบร่างถูกยกเลิกตั้งแต่

— Tofandel

573

คำตอบสั้น ๆ : คุณทำไม่ได้

คำตอบยาว: คุณไม่ควร

ตั้งชื่อคลาสหรือรหัสแล้วใช้สไตล์ชีทเพื่อใช้สไตล์

:hoverเป็นตัวเลือกหลอกและสำหรับCSSมีความหมายเฉพาะในสไตล์ชีทเท่านั้น ไม่มีสิ่งใดเทียบเท่าสไตล์ inline (เนื่องจากไม่ได้กำหนดเกณฑ์การเลือก)

ตอบสนองต่อความคิดเห็นของ OP:

ดูCSS ทั้งหมดด้วย Javascriptสำหรับสคริปต์ที่ดีในการเพิ่มกฎ CSS แบบไดนามิก ดูที่การเปลี่ยนสไตล์ชีทสำหรับทฤษฎีบางอย่างในเรื่อง

นอกจากนี้อย่าลืมคุณสามารถเพิ่มลิงก์ไปยังสไตล์ชีตภายนอกหากเป็นตัวเลือก ตัวอย่างเช่น,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

ข้อควรระวัง: ข้างต้นถือว่ามีส่วนหัว

— Jonathan Fingland
แหล่งที่มา

4

คุณสามารถเพิ่มคลาส CSS ในจาวาสคริปต์

— Jonathan Fingland

204

มีสถานการณ์อื่น ๆ ที่ CSS แบบอินไลน์เป็นตัวเลือกเดียว - เช่นอีเมล HTML (เช่น Gmail จะไม่สนใจ CSS เว้นแต่เป็นแบบอินไลน์) น่าเสียดายที่ Javascript ถูกปล้นในไคลเอนต์อีเมลส่วนใหญ่และฉันยังไม่พบวิธีเพิ่ม: เอฟเฟกต์โฮเวอร์

— Simon East

24

@ คาโตะในขณะที่เป็นลิงค์ที่ยอดเยี่ยมและฉันหวังว่ามันจะทำงานได้ดีจริงๆมันไม่ได้เป็นเช่นนั้น เพียงเพื่อยืนยันฉันทดสอบโดยใช้ไวยากรณ์style="{color:green;} :hover { color: red; }"และ firefox จัดการเพื่อสีเขียวลิงค์ แต่ไม่สนใจโฮเวอร์ Chrome ไม่สนใจทั้งสองอย่าง การทดสอบอย่างต่อเนื่องจะไม่มีจุดหมายสวย

— Jonathan Fingland

9

ฉันไม่ได้ระบุว่ามันเป็นวิธีแก้ปัญหาในการทำงาน ฉันระบุว่าไม่ใช่ "ทั้งหมด" ถูกต้องที่จะบอกว่าไม่มีการเทียบเท่าแบบอินไลน์และตัวเลือกหลอกที่ไม่มีความหมายภายนอกสไตล์ชีท มันไม่เหมาะสมอย่างไร

— Kato

5

ทำไมคำตอบยาว ๆ คือคุณไม่ควร ... คุณ ... คุณไม่ควรพูดคุย ฉันพยายามส่งข้อความอีเมลด้วย html แต่เดาว่า ... gmail ลบแท็กสไตล์ทั้งหมดออกการอ้างอิงสไตล์ภายนอกทั้งหมดและสคริปต์ทั้งหมด ดังนั้น ... มีวิธีใดบ้างที่จะกำหนดสไตล์สีของลิงก์ภายในอีเมลที่ส่งไปยัง gmail หรือไม่ หวังว่ามันจะ ... หวังว่าคนสุดท้ายจะตาย !!! =)

— Miguel Angelo

435

คุณสามารถได้รับผลกระทบเดียวกันโดยเปลี่ยนสไตล์ของคุณด้วย JavaScript ในonMouseOverและonMouseOutพารามิเตอร์แม้ว่าจะไม่มีประสิทธิภาพมากหากคุณต้องการเปลี่ยนองค์ประกอบมากกว่าหนึ่งรายการ:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

ขยายตัวอย่างข้อมูล

นอกจากนี้ฉันจำไม่ได้ว่าthisทำงานในบริบทนี้หรือไม่ document.getElementById('idForLink')คุณอาจจะต้องเปลี่ยนด้วย

— อเล็กซ์
แหล่งที่มา

12

นั่นคือสมาร์ท! ใช้งานกับเอฟเฟ็กต์โฮเวอร์สีพื้นหลังได้ด้วย<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

— mxro

46

ต้องหัวเราะเมื่อเห็นว่าเป็น 'ฉลาด' :) มันยากที่จะจินตนาการว่าบางคนไม่ได้อยู่แถวนี้เมื่อเป็นวิธีที่โดดเด่น / วิธีเดียวที่คุณสามารถบรรลุผลนี้ หรือแย่กว่านั้นคือการมี 'รูปภาพ' และต้องสลับรูปภาพเพียงเพื่อให้เอฟเฟกต์ 'โฮเวอร์' ทำให้ฉันรู้สึกแก่! แต่พอจะพูดได้มันตอบคำถามของ OP :)

— Manachi

5

ฉันต้องยอมรับกับ Manachi ในเรื่องนี้ นี่เป็นเหมือนย้อนหลังไปถึงจาวาสคริปต์ทางภูมิศาสตร์ 90s; P

— Eric Castro

9

เก่าใหม่โบราณหรือล่วงหน้า มันตอบคำถามและช่วยฉัน ขอบคุณ @peter

— user2060451

4

ฉันต้องทำสิ่งนี้เพื่อรับอีเมลและใช้งานได้ ขอบคุณ! การแก้ปัญหานี้จริง ๆ แล้วไม่เหมือนคำตอบที่ยอมรับ

— theUtherSide

53

คุณสามารถทำได้ในบางจุดในอดีต แต่ตอนนี้ (ตามการแก้ไขล่าสุดของมาตรฐานเดียวกันซึ่งเป็นคำแนะนำผู้สมัคร) คุณทำไม่ได้

— fuddin
แหล่งที่มา

3

คำตอบอื่น ๆ ทั้งหมดบอกว่ามันเป็นไปไม่ได้ แต่คุณแสดงว่าเป็นไปได้คำตอบของคุณแตกต่างกันฉันกำลังทดสอบ

— Amr Elgarhy

2

ขออภัยฉันเพิ่งตรวจสอบวันที่ของบทความ อายุ 10 ปี ดังนั้นจึงไม่มีการรับประกันว่าควรจะทำงาน ถ้าเป็นเช่นนั้นโปรดบอกฉันด้วย

— fuddin

2

ฉันทดสอบสิ่งนี้:

<a href="http://www.w3.org/"           style="{color: #900}           :link {background: #ff0}           :visited {background: #fff}           :hover {outline: thin red solid}           :active {background: #00f}">...</a>

แต่มันไม่ทำงาน

— Amr Elgarhy

5

ในกรณีที่มีใครพบคำตอบนี้ผู้ตอบตอบคำถามเกี่ยวกับคุณสมบัตินี้ได้ที่นี่: stackoverflow.com/questions/9884182/…

— BoltClock

9

แม่นยำกว่าที่จะพูดคุณสามารถทำได้ในบางจุดในอดีต แต่ตอนนี้ (ตามแก้ไขล่าสุดของมาตรฐานเดียวกันซึ่งเป็นผู้สมัครแนะนำ) คุณไม่สามารถ

— Ilya Streltsyn

34

ฉันช้ามากที่สนับสนุนสิ่งนี้ แต่ฉันเสียใจที่เห็นไม่มีใครแนะนำสิ่งนี้ถ้าคุณต้องการรหัสแบบอินไลน์คุณสามารถทำได้ ฉันต้องการมันสำหรับปุ่มโฮเวอร์บางปุ่มวิธีนี้คือ:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}

<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

ขยายตัวอย่างข้อมูล

ในกรณีนี้รหัสแบบอินไลน์: "background-color: red;" คือสีของสวิตช์บนโฮเวอร์วางสีที่คุณต้องการลงไปจากนั้นโซลูชันนี้ใช้งานได้ ฉันรู้ว่านี่อาจไม่ใช่โซลูชันที่สมบูรณ์แบบในแง่ของความเข้ากันได้ แต่มันใช้งานได้ถ้าจำเป็นจริงๆ

— lukesrw
แหล่งที่มา

4

ขอบคุณ. นั่นเป็นคำตอบที่ดีฉันคิดว่าคำตอบนี้จะต้องเป็นทางออก

— Hovhannes Sargsyan

64

ไม่มี OP กล่าวว่าพวกเขาอยากให้มันใน CSS แบบอินไลน์ภายในแอตทริบิวต์สไตล์ของ

— jj_

3

ฉันรู้ว่า jj_- แต่วิธีนี้ช่วยให้คุณใส่เพียงไม่กี่บรรทัดใน CSS และใช้มันซ้ำแล้วซ้ำอีกในหลาย ๆ ที่หลายคน (รวมถึงตัวเอง) พบว่าสิ่งนี้เป็นทางเลือกที่มีประโยชน์

— Lukesrw

2

นี่ควรเป็นคำตอบที่แท้จริงโดยมีการดัดแปลงเล็กน้อย: อย่าตั้งค่าสีใด ๆ ในสไตล์เพียงแค่กฎที่จะสืบทอดจากพาเรนต์เมื่อโฮเวอร์จากนั้นตั้งค่าอินไลน์สองสี

— Hayko Koryun

4

นี่เป็นเพียงวิธี "ปกติ" ที่ทุกคนพูดว่าเป็นวิธีที่ถูกต้อง อย่างไรก็ตามมันไม่ได้เป็นแบบอินไลน์ซึ่งเป็นคำขอดั้งเดิมของ OP

— wcndave

31

คุณไม่สามารถทำสิ่งที่คุณอธิบายได้อย่างแน่นอนเนื่องจากa:hoverเป็นส่วนหนึ่งของตัวเลือกไม่ใช่กฎ CSS สไตล์ชีทมีสององค์ประกอบ:

selector {rules}

รูปแบบอินไลน์มีกฎเท่านั้น ตัวเลือกมีความหมายว่าเป็นองค์ประกอบปัจจุบัน

ตัวเลือกเป็นภาษาที่แสดงออกซึ่งอธิบายชุดของเกณฑ์เพื่อจับคู่องค์ประกอบในเอกสารที่มีลักษณะคล้าย XML

อย่างไรก็ตามคุณสามารถเข้าใกล้เพราะstyleชุดเทคนิคสามารถไปได้เกือบทุกที่:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

— เร็กซ์เอ็ม
แหล่งที่มา

3

ที่จริงแล้วคุณไม่สามารถ:“ HTML อนุญาตให้องค์ประกอบสไตล์ใด ๆ ในส่วน HEAD ของเอกสาร” ( w3.org/TR/html4/present/styles.html#edef-STYLE )

— Éric Araujo

2

ทำงานบนเครื่องของฉัน ขอบคุณ!

— Josh Habdas

@ ÉricAraujo: แล้วห่อเนื้อหาทั้งหมดนี้ไว้ใต้<html> </html>แท็ก

— fuddin

30

ใช้ Javascript:

a) การเพิ่มสไตล์แบบอินไลน์

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) หรือวิธีที่ยากขึ้นเล็กน้อย - เพิ่ม "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

หมายเหตุ: รูปแบบหลายคำ (เช่นfont-size) ใน Javascript ถูกเขียนด้วยกัน :

element.style.fontSize="12px"

— T.Todua
แหล่งที่มา

3

เนื่องจากคำตอบนี้ได้รับการแก้ไขลงไปตอนนี้ดูเหมือนว่าจะไม่เกี่ยวข้องกับคำถามเดิมอย่างสมบูรณ์ ...

— Bill

1

ว้าวกำลังคิดนอกกรอบ ... ฉันรักมัน!

— theglossy1

14

นี่คือตัวอย่างรหัสที่ดีที่สุด:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

ขยายตัวอย่างข้อมูล

คำแนะนำของผู้ดำเนินรายการ: แยกข้อกังวลของคุณออก

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

ขยายตัวอย่างข้อมูล

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

ขยายตัวอย่างข้อมูล

— user1476842
แหล่งที่มา

10

การประกาศ pseudoclass แบบอินไลน์ไม่ได้รับการสนับสนุนในการวนซ้ำปัจจุบันของ CSS (แต่จากสิ่งที่ฉันเข้าใจอาจเป็นรุ่นในอนาคต)

สำหรับตอนนี้ทางออกที่ดีที่สุดของคุณน่าจะเป็นเพียงแค่กำหนดบล็อกสไตล์ด้านบนลิงค์ที่คุณต้องการสไตล์:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

— inkedmn
แหล่งที่มา

4

ความคิดนั้นจะโชคดีที่ลดลง (ดูlists.w3.org/Archives/Public/www-style/2009Jun/0341.htmlภายใต้ "Abandoned Working Draft")

— Ms2ger

3

มี หายไปในคำตอบนี้

— Joel

9

ตามที่ระบุไว้คุณไม่สามารถตั้งค่ารูปแบบอินไลน์โดยพลการสำหรับโฮเวอร์ แต่คุณสามารถเปลี่ยนสไตล์ของเคอร์เซอร์โฮเวอร์ในCSSโดยใช้สิ่งต่อไปนี้ในแท็กที่เหมาะสม:

style="cursor: pointer;"

— Rutherford
แหล่งที่มา

2

นั่นควรเป็นคำตอบที่ดีที่สุด

— Vladislav Guleaev

6

<style>a:hover { }</style>
<a href="/">Go Home</a>

โฮเวอร์เป็นคลาสหลอกดังนั้นจึงไม่สามารถใช้กับแอตทริบิวต์สไตล์ได้ มันเป็นส่วนหนึ่งของตัวเลือก

— โจเอล
แหล่งที่มา

2

@Derek ในกรณีที่ยังคงสนใจ / สำหรับคนอื่น ๆ ที่อ่าน: "~ /" (เครื่องหมายตัวหนอนไปข้างหน้าเครื่องหมายทับ) เป็นการอ้างอิงฝั่งเซิร์ฟเวอร์ไปยังรากของแอปพลิเคชันในแอปพลิเคชันเว็บ asp.net (แอปพลิเคชันรูทอาจเป็นโฟลเดอร์ย่อยของหลักสูตร) มันใช้ที่นี่จะไม่ถูกต้องดังนั้นเหตุผลที่คำตอบได้รับการแก้ไขตั้งแต่คุณถามคำถาม (ฉันสงสัย)

— Chris

5

คุณสามารถทำได้ แต่ไม่ใช่ในรูปแบบอินไลน์ คุณสามารถใช้onmouseoverและonmouseoutกิจกรรม:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

ขยายตัวอย่างข้อมูล

4

ตามความคิดเห็นของคุณคุณกำลังส่งไฟล์ JavaScript อยู่แล้ว ทำโรลโอเวอร์ใน JavaScript วิธีการของjQuery$.hover()ทำให้ง่ายเช่นเดียวกับ wrapper JavaScript อื่น ๆ มันไม่ยากเกินไปใน JavaScript แบบตรงเช่นกัน

— ชาห์ Vineel
แหล่งที่มา

ขณะนี้เป็นรอบการทำงาน แต่มัน seams คำตอบที่ดีมากสำหรับผมและคำตอบที่ดีที่สุดถ้ามันไม่ได้เป็นไปได้ที่จะเขียนแบบอินไลน์โฉบ

— Amr Elgarhy

4

ไม่มีวิธีการทำเช่นนี้ ตัวเลือกของคุณคือการใช้ JavaScript หรือบล็อก CSS

อาจมีห้องสมุด JavaScript บางส่วนที่จะแปลงแอตทริบิวต์สไตล์ที่เป็นกรรมสิทธิ์ให้เป็นบล็อกสไตล์ แต่รหัสนั้นจะไม่เป็นไปตามมาตรฐาน

— m_vitaly
แหล่งที่มา

2

ฉันเพิ่งค้นพบทางออกที่แตกต่าง

ปัญหาของฉัน: ฉันมี<a>แท็กรอบสไลด์ / ตัวแสดงเนื้อหาหลักรวมถึง<a>แท็กในส่วนท้าย ฉันต้องการให้พวกเขาไปที่เดียวกันใน IE ดังนั้นทั้งย่อหน้าจะขีดเส้นใต้onHoverแม้ว่าพวกเขาจะไม่ได้ลิงก์: สไลด์โดยรวมเป็นลิงค์ IE ไม่ทราบความแตกต่าง onHoverฉันยังมีการเชื่อมโยงที่เกิดขึ้นจริงบางอย่างในส่วนท้ายของฉันที่จะต้องขีดเส้นใต้สีและการเปลี่ยนแปลง ฉันคิดว่าฉันจะต้องใส่สไตล์ให้สอดคล้องกับแท็กส่วนท้ายเพื่อเปลี่ยนสี แต่คำแนะนำจากด้านบนแสดงว่าเป็นไปไม่ได้

การแก้ไข: ฉันให้ส่วนท้ายของลิงก์สองชั้นที่แตกต่างกันและปัญหาของฉันได้รับการแก้ไข ฉันสามารถมีการonHoverเปลี่ยนสีในชั้นเรียนเดียวให้สไลด์onHoverไม่มีการเปลี่ยนสี / ขีดเส้นใต้และยังสามารถมี HREFS ภายนอกในส่วนท้ายและภาพนิ่งในเวลาเดียวกัน!

— ลิซ
แหล่งที่มา

1

ผมเห็นด้วยกับเงา คุณสามารถใช้onmouseoverและonmouseoutกิจกรรมเพื่อเปลี่ยนCSSผ่าน JavaScript

และอย่าบอกว่าผู้คนต้องเปิดใช้งาน JavaScript มันเป็นเพียงปัญหาสไตล์ดังนั้นจึงไม่สำคัญว่ามีผู้เข้าชมบางคนที่ไม่มี JavaScript;) แม้ว่าส่วนใหญ่จะเป็น Web 2.0ทำงานกับ JavaScript ดูFacebookตัวอย่างเช่น (จำนวนมากจาวาสคริปต์) หรือสเปซ

— Jaysn
แหล่งที่มา

0

เกมนี้ค่อนข้างช้า แต่เมื่อใดที่คุณจะใช้ JavaScript ในอีเมล HTML ตัวอย่างเช่นที่ บริษัท ที่ฉันทำงานอยู่ในปัจจุบัน (rhymes กับ Abodee) เราใช้ตัวหารร่วมที่ต่ำที่สุดสำหรับแคมเปญการตลาดผ่านอีเมลส่วนใหญ่และ JavaScript ไม่ได้ถูกใช้งาน เคย ยกเว้นว่าคุณกำลังอ้างถึงการประมวลผลล่วงหน้าบางประเภท

ดังที่กล่าวไว้ในโพสต์ที่เกี่ยวข้อง: "Lotus Notes, Mozilla Thunderbird, Outlook Express และ Windows Live Mail ดูเหมือนจะรองรับการใช้งาน JavaScript บางประเภทไม่มีอะไรเกิดขึ้น"

ลิงก์ไปยังบทความที่นำสิ่งนี้ไปใช้: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

นอกจากนี้จะโฮเวอร์การแปลเป็นอุปกรณ์เคลื่อนที่อย่างไร นั่นเป็นเหตุผลที่ฉันชอบคำตอบจากด้านบน:Long answer: you shouldn't.

หากใครมีข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับเรื่องนี้โปรดอย่าลังเลที่จะแก้ไขฉัน ขอบคุณ.

— Shawn Spencer
แหล่งที่มา

0

ดังนั้นนี่ไม่ใช่สิ่งที่ผู้ใช้ค้นหา แต่ฉันพบคำถามนี้เพื่อค้นหาคำตอบและเกิดสิ่งที่เกี่ยวข้องขึ้นมา ฉันมีองค์ประกอบการทำซ้ำที่ต้องใช้สี / โฮเวอร์ใหม่สำหรับแท็บภายในองค์ประกอบเหล่านั้น ฉันใช้แฮนด์บาร์ซึ่งเป็นกุญแจสำคัญในการแก้ไขปัญหาของฉัน แต่ภาษาแม่แบบอื่น ๆ อาจใช้งานได้

ฉันกำหนดสีบางส่วนและส่งต่อไปยังเทมเพลตแฮนด์บาร์สำหรับแต่ละองค์ประกอบ ที่ด้านบนของเทมเพลตฉันกำหนดแท็กสไตล์และใส่คลาสที่กำหนดเองและสีโฮเวอร์

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

จากนั้นฉันใช้สไตล์ในเทมเพลต:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

คุณอาจไม่ต้องการ !important

— webhound
แหล่งที่มา

0

คุณสามารถเขียนรหัสในรูปแบบต่าง ๆ

ก่อนอื่นฉันสามารถเขียนสิ่งนี้

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one{
  text-decoration: none;
}

คุณสามารถลองวิธีอื่นได้

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

คุณสามารถลองโฮเวอร์ด้วย jquery

จาวาสคริปต์

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

ในรหัสนี้คุณมีสามฟังก์ชั่นใน jquery ก่อนคุณพร้อมฟังก์ชั่นซึ่งเป็นพื้นฐานของฟังก์ชั่นของ jquery แล้วที่สองคุณมีฟังก์ชั่นโฮเวอร์ในฟังก์ชั่นนี้เมื่อคุณเลื่อนตัวชี้ไปที่ข้อความสีจะเปลี่ยนแล้ว เมื่อคุณปล่อยตัวชี้ไปยังข้อความมันจะเป็นสีต่างกันและนี่คือฟังก์ชั่นที่สาม

— Siraj Ahmed
แหล่งที่มา

โปรดหลีกเลี่ยงการโพสต์คำตอบที่ซ้ำกัน

— Simas Joneliunas

ok คุณ simas-joneliunas

— Siraj Ahmed

วิธีการเหล่านี้ไม่มีวิธีแก้ปัญหาที่แสดงในคำถาม คุณไม่สามารถใช้ JS ในอีเมลที่มีรูปแบบ HTML ได้เลยและวิธีการอื่นที่คุณแนะนำให้ใช้คลาสที่มีการตัดทอนอย่างชัดเจน

— เควนติ

0

ตอนนี้มันเป็นไปได้ด้วยHacss

— นิคแซนเดอร์
แหล่งที่มา

-1

ฉันต้องหลีกเลี่ยงจาวาสคริปต์ แต่สามารถไปกับรหัสฝั่งเซิร์ฟเวอร์

ดังนั้นฉันจึงสร้างรหัสสร้างบล็อกสไตล์สร้างลิงค์ด้วยรหัสนั้น ใช่ HTML ที่ถูกต้อง

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

ขยายตัวอย่างข้อมูล

— BananaAcid
แหล่งที่มา

-2

คุณสามารถใช้คลาสหลอกa:hoverในสไตล์ชีทภายนอกเท่านั้น ดังนั้นฉันแนะนำให้ใช้สไตล์ชีทภายนอก รหัสคือ:

a:hover {color:#FF00FF;}   /* Mouse-over link */

— user1466310
แหล่งที่มา

แน่นอนว่าคุณไม่ต้องการแผ่นงานภายนอกเพียงแค่ใช้styleแท็ก

— Dmitri Zaitsev

-2

คุณสามารถทำ id ได้โดยการเพิ่มคลาส แต่ไม่ต้องอินไลน์

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 บรรทัด แต่คุณสามารถใช้คลาสได้ทุกที่

— แมลง
แหล่งที่มา

-3

ปัญหาของฉันคือฉันกำลังสร้างเว็บไซต์ที่ใช้ภาพไอคอนจำนวนมากที่จะต้องเปลี่ยนเป็นภาพที่แตกต่างกันในการโฮเวอร์ ฉันผลิตโซลูชันต่อไปนี้สำหรับสิ่งนี้:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

ฉันแนะนำคอนเทนเนอร์ที่มีคู่ของภาพ ครั้งแรกที่มองเห็นและอื่น ๆ ที่ถูกซ่อนอยู่ (จอแสดงผล: ไม่มี) เมื่อโฮเวอร์คอนเทนเนอร์, อันแรกจะถูกซ่อน (display: none) และอันที่สองจะปรากฏขึ้นอีกครั้ง (display: block)

— Jochem Geussens
แหล่งที่มา

วิธีเขียน a: hover ใน CSS แบบอินไลน์

ใช้ Javascript: