হোভারে গা bold় করা হলে ইনলাইন উপাদানগুলি স্থানান্তরিত হয়

Question

আমি এইচটিএমএল তালিকা এবং সিএসএস ব্যবহার করে একটি অনুভূমিক মেনু তৈরি করেছি। আপনি লিঙ্কগুলি উপর ঘোরাফেরা ব্যতীত সবকিছু যেমন প্রয়োজন তেমনি কাজ করে। আপনি দেখুন, আমি লিঙ্কগুলির জন্য একটি সাহসী হোভার অবস্থা তৈরি করেছি এবং সাহসী আকারের পার্থক্যের কারণে এখন মেনু লিঙ্কগুলি স্থানান্তরিত।

আমি এই সাইটপয়েন্ট পোস্টের মতো একই সমস্যার মুখোমুখি । তবে পোস্টের সঠিক সমাধান নেই। আমি সমাধানের জন্য সর্বত্র অনুসন্ধান করেছি এবং এর কোনও সন্ধান করতে পারি না। অবশ্যই আমি একমাত্র এটি করতে চেষ্টা করতে পারি না।

কারো কি কোন ধারনা আছে?

PS: আমি মেনু আইটেমগুলিতে পাঠ্যের প্রস্থ জানি না তাই আমি লি আইটেমগুলির প্রস্থ নির্ধারণ করতে পারি না।

.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: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

Answer 1

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

জেএসফিডেলে কাজের উদাহরণটি দেখুন । ধারণাটি হ'ল সিউডো উপাদানগুলিতে সাহসী (বা কোনও :hoverরাষ্ট্রীয় শৈলী) সামগ্রীর জন্য স্থান সংরক্ষণ করা :beforeএবং সামগ্রীর উত্স হিসাবে শিরোনাম ট্যাগ ব্যবহার করা।

Comments

পারফেক্ট! এটি <a> ব্যবহার করে এমনকি কোনও উল ব্যবহার না করেই কাজ করে, আমি শিরোনামের পরিবর্তে ডেটা-পাঠ্যের মতো আরেকটি বৈশিষ্ট্য ব্যবহার করব।

— ব্রিটংগার

এই সমাধান কাজ, কিন্তু তার ভাল আপনি যোগ যখন margin-top: -1pxথেকে :after1px উচ্চতার স্থান তৈরি এড়ানো।

— micropro.cz

@ ম্যাট্রোবার্টস 33 :বনাম ::"প্রতিটি ব্রাউজার যা ডাবল কোলন ::সিএসএস 3 সিনট্যাক্সকে সমর্থন করে কেবল সিনট্যাক্সকে সমর্থন করে :, তবে আই 8 কেবলমাত্র সিঙ্গল-কোলন সমর্থন করে, তাই আপাতত সেরা ব্রাউজার সমর্থনের জন্য কেবলমাত্র সিঙ্গল-কোলন ব্যবহার করার পরামর্শ দেওয়া হয়েছে।" css-tricks.com/almanac/selectors/a/ after

— and-

@ হুঘটওটল হরফ-আকার ব্যবহার করুন: 0 ULবা a::afterঅন্য কথায় - সমস্ত প্যাডিং / মার্জিং / লাইন-উচ্চতা / ফন্ট-আকার ইত্যাদি পুনরায় সেট করুন

— 350D

দুর্ভাগ্যক্রমে, আপনার কাছে সর্বদা টুলটিপটি প্রদর্শিত থাকে :-(

— বেনিডিক্ট

Answer 2

একটি আপোসযুক্ত সমাধান হ'ল পাঠ্য-ছায়া সহ জাল বোল্ড, যেমন:

পাঠ্য-ছায়া: 0 0 0.01px কালো;

আরও ভাল তুলনার জন্য আমি এই উদাহরণগুলি তৈরি করেছি:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

এর জন্য text-shadowসত্যই কম মানতে যাওয়ার blur-radiusফলে ঝাপসা প্রভাব এতটা সুস্পষ্ট হবে না।

সাধারণভাবে আপনার পুনরাবৃত্তি যত বেশি text-shadowসাহসী আপনার পাঠ্য পাবে তবে একই সাথে অক্ষরের মূল আকারটি হারাবে।

আমার আপনাকে সতর্ক করা উচিত যে blur-radiusভগ্নাংশগুলিতে সেটিংস স্থাপন করা সমস্ত ব্রাউজারে একই রকম হয় না! উদাহরণস্বরূপ, সাফারি ক্রোম যেমন করবে তেমনভাবে রেন্ডার করতে আরও বড় মানগুলির প্রয়োজন।

Comments

এটি অন্যান্য ব্রাউজারের গণিত সাহসী সমাধানগুলির চেয়ে আরও খারাপ এবং এড়ানো উচিত

— জ্যাচ সসিয়ের

Answer 3

আপনি যদি প্রস্থ সেট করতে না পারেন, তার অর্থ পাঠ্যটি সাহসী হওয়ার সাথে সাথে প্রস্থটি পরিবর্তন হবে। এটিকে এড়ানোর কোনও উপায় নেই, প্রতিটি রাজ্যের জন্য প্যাডিং / মার্জিন সংশোধন করার মতো আপস ছাড়া by

Comments

অ্যান্ড্রু যেমন বলেছিলেন তেমন +1, সাহসী পাঠ্য আরও প্রশস্ত। জীবনের বাস্তবতা. এমনকি এটি এড়াতে বা এর সাথে বেঁচে থাকার জন্য মেনু আইটেমগুলির প্রস্থও স্থির করুন (প্যাডিংকে পুনরায় গণনা করা ত্রুটিযুক্ত এবং ত্রুটির প্রবণ)।

— ক্লিটাস

হ্যাঁ, আমি এই কারণে গা bold় মাউসওভার প্রভাব এড়াতে চাই।

— স্টিভ ওয়ারথাম

"এটি এড়ানোর কোনও উপায় নেই"। নীচে 350 ডি দ্বারা উত্তর দেখুন।

— গুলফ্লাম

আরও মনে রাখবেন যে 350 ডি এর সমাধান যুক্ত হওয়ার 4 বছর আগে অ্যান্ড্রুয়ের উত্তর পোস্ট করা হয়েছিল। সামগ্রীর মান হিসাবে অ্যাট্রি () ফাংশন সহ সিউডো উপাদানগুলি তখন আর সম্ভব ছিল না :) ওহ সময় স্ট্যাক ওভারফ্লোতে উড়ে যায়। তবে সম্প্রদায়টি এটি পেরে গেছে এবং এটি গ্রহণযোগ্য উত্তর এবং সর্বাধিক উন্নতি হয়েছে, তাই আমি খুশি!

— জাস্টাস রোমিজন

Answer 4

আরেকটি ধারণা ব্যবহার করছে letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Comments

এটি কি সমস্ত ব্রাউজার, বিশেষত আই 10 + এবং সাফারি দিয়ে কাজ করে?

— উমায়ের হাফিজ

আমার প্রিয় একটি :)

— Inc33

@UmairHafeez হ্যাঁ সব আধুনিক ব্রাউজারে অপেরা মিনি আশা caniuse.com/#feat=css-letter-spacing

— জন মধ্যে Magnolia

আপনি কীভাবে জানলেন যে 0.235px সঠিক পরিমাণ? কোন ব্যবধান প্রয়োজন তা গণনার জন্য কোনও সূত্র আছে কি?

— কোল্ড_ক্লাস

না আমি মনে করি এটি কেবল দ্রুত বিচার এবং ত্রুটি ছিল

— জন ম্যাগনোলিয়া

Answer 5

জ্যাকুরিতে একটি লাইন:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

সম্পাদনা: যদিও এটি সমাধানটি আনতে পারে, তবে একটির উল্লেখ করা উচিত যে এটি মূল পোস্টে কোডের সাথে কাজ করে না। "ডিসপ্লে: ইনলাইন" প্রস্থ-সেটিং কার্যকর করার জন্য ভাসমান-পরামিতিগুলির সাথে প্রতিস্থাপিত করতে হবে এবং উদ্দেশ্য হিসাবে কাজ করতে এই অনুভূমিক মেনুতে।

Comments

আপনি কি পৃষ্ঠার সমস্ত লিঙ্কের জন্য এটি করতে পারেন? যে, কাজ ul.nav li aসঙ্গে প্রতিস্থাপন না a?

— gnzlbg

এই প্রশ্নটি জেএসের সাথে ট্যাগ করা হয়নি, যাকুয়ারি ছেড়ে দিন। অযথা সমাধান পোস্ট করবেন না দয়া করে।

— জ্যাচ সসইয়ার

@ জাচ স্যুসিয়ার কিছু পরিস্থিতিতে কিছু ডেভস একটি জেএস সমাধান পছন্দ করতে পারে, কারণ সেগুলি সাধারণত কম হয়। জেএসের সাথে কিছু পোস্ট করা প্রত্যেককে নিম্নমানের পরিবর্তে, আপনি প্রশ্নটিতে জেএস ট্যাগ যুক্ত করতে পারেন এবং প্রতিটি ব্যক্তিকে কোন সমাধানটি আরও দরকারী বলে সিদ্ধান্ত নিতে দেয়।

— lurkit

@ জ্যাচ সাউসিয়ার সিএসএস সমাধান কিছু পরিস্থিতিতে ব্যবহারিক নাও হতে পারে। কখনও কখনও আপনার আলাদা শিরোনামের বৈশিষ্ট্য থাকতে পারে, বা সিউডো এলিমেন্টের পরে :: ইতিমধ্যে ব্যবহার করা হয়েছে, বা আপনি সিএসএসের বেশ কয়েকটি লাইনে জেএসে একটি লাইনার ব্যবহার করার জন্য কোনও নির্দিষ্ট পরিস্থিতিতে ব্যক্তিগতভাবে আরও ব্যবহারিক বিবেচনা করতে পারেন। আমি বেশিরভাগ ক্ষেত্রে সিএসএসের উত্তরকে সর্বোত্তম বলে বিবেচনা করি তবে জেএস উত্তরগুলি অতিরিক্ত বিকল্প হিসাবে পাওয়া কার্যকর useful

— lurkit

এটিই কেবলমাত্র একটি সমাধান যা আমি খুঁজে পেলাম যে উপাদানগুলির মধ্যে এমনকি ব্যবধান বজায় রেখে সমস্যার সমাধান করে।

— জেইদেন মিসপি

Answer 6

CSS3 সমাধান - পরীক্ষামূলক

(ভুয়া সাহস)

একটি ভিন্ন সমাধান ভাগ করে নেওয়ার কথা ভেবেছিল যা এখানে কেউ প্রস্তাব দেয় না। একটি সম্পত্তি বলা হয়েছে text-strokeযা এটির জন্য কার্যকর হবে।

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

এখানে, আমি spanট্যাগটির ভিতরে থাকা পাঠ্যটিকে লক্ষ্য করছি এবং আমরা এটি একটি পিক্সেল দ্বারা স্ট্রোক করি blackযা boldসেই নির্দিষ্ট পাঠ্যের জন্য শৈলী অনুকরণ করবে ।

মনে রাখবেন যে এই সম্পত্তিটি এখন পর্যন্ত (এই উত্তরটি লেখার সময়) ব্যাপকভাবে সমর্থিত নয়, কেবল ক্রোম এবং ফায়ারফক্স এটি সমর্থন করে বলে মনে হচ্ছে। ব্রাউজার সমর্থন সম্পর্কে আরও তথ্যের জন্য text-stroke, আপনি CanIUse উল্লেখ করতে পারেন ।

---

কেবলমাত্র কিছু অতিরিক্ত জিনিস ভাগ করে নেওয়ার জন্য, আপনি -webkit-text-stroke-width: 1px;যদি colorস্ট্রোকের জন্য সেট সেট না করে থাকেন তবে আপনি ব্যবহার করতে পারেন ।

Comments

এটি আশ্চর্যজনক

— অ্যালান ফিটজপ্যাট্রিক

দুর্দান্ত টিপ। দুর্ভাগ্য যে 4 বছর পরে এটি এখনও স্ট্যান্ডার্ড নয়।

— ডেভিড ভেসেলোভস্কি

Answer 7

আপনি কিছু মত ব্যবহার করতে পারে

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

এবং তারপরে আপনার সিএসএসে স্প্যান সামগ্রীটি গা bold়ভাবে সেট করুন এবং এটি দৃশ্যমানতার সাথে গোপন করুন: লুকানো, যাতে এটি তার মাত্রাগুলি বজায় রাখে। তারপরে এটি সঠিকভাবে ফিট করার জন্য আপনি নীচের উপাদানগুলির মার্জিনগুলি সামঞ্জস্য করতে পারেন।

এই পদ্ধতির যদিও এসইও বান্ধব কিনা তা আমি নিশ্চিত নই।

Comments

এটি বিকাশকারী / রক্ষণাবেক্ষণ বান্ধবও নয়

— Zach Sauceer

Answer 8

আমি কেবল "ছায়া" সমাধান দিয়ে সমস্যার সমাধান করেছি। এটি সবচেয়ে সহজ এবং কার্যকর বলে মনে হচ্ছে।

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

তিনবার ছায়া পুনরাবৃত্তি করার প্রয়োজন নেই (ফলাফলটি আমার জন্য একই ছিল)।

Comments

এটি অন্যান্য ব্রাউজারের গণিত সাহসী সমাধানগুলির চেয়ে আরও খারাপ এবং এড়ানো উচিত

— জ্যাচ সসিয়ের

Answer 9

আপনার মতো আমারও সমস্যা ছিল। আমি চাইছিলাম যে আমার লিঙ্কগুলি সাহসী হয়ে উঠবে যখন আপনি সেগুলি ঘুরে দেখেন কেবল মেনুতে নয় তবে পাঠ্যেও। আপনি যদি অনুমান করেন যে এটি সমস্ত বিভিন্ন প্রস্থকে খুঁজে বের করে আসল কাজ হবে ch সমাধানটি বেশ সহজ:

এমন একটি বাক্স তৈরি করুন যাতে লিখিত পাঠ্যটি আপনার পটভূমির মতো গা bold় তবে রঙিন এবং এতে আপনার বাস্তব লিঙ্ক রয়েছে। এখানে আমার পৃষ্ঠা থেকে একটি উদাহরণ:

সিএসএস:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

অবশ্যই আপনার পৃষ্ঠার ব্যাকগ্রাউন্ড রঙ দ্বারা আপনার # FFFFE0 প্রতিস্থাপন করতে হবে। জেড-সূচকগুলি প্রয়োজনীয় বলে মনে হচ্ছে না তবে আমি এগুলি যেভাবেই রেখেছি (যেহেতু "হাইপো" উপাদানটি এইচটিএমএল-কোডে "হাইপার" উপাদান পরে আসবে)। এখন, আপনার পৃষ্ঠায় একটি লিঙ্ক রাখতে, নিম্নলিখিতগুলি অন্তর্ভুক্ত করুন:

এইচটিএমএল:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

দ্বিতীয় "এখানে" অদৃশ্য এবং আপনার লিঙ্কের নীচে লুকানো থাকবে। আপনার সাহসী লিঙ্কের পাঠ্য সহ এটি একটি স্থিতিশীল বাক্স হিসাবে, আপনার লিঙ্কটি ওভার করার আগে আপনার বাকী বাক্যটি আর স্থানান্তরিত হবে না কারণ এটি ইতিমধ্যে স্থানান্তরিত হয়েছে।

আশা করি আমি সাহায্য করতে সক্ষম হয়েছিল :)।

এতক্ষণ

Answer 10

আপনি "মার্জিন" সম্পত্তি নিয়ে কাজ করতে পারেন:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

কেবলমাত্র নিশ্চিত হয়ে নিন যে বাম এবং ডান মার্জিন যথেষ্ট বড় তাই অতিরিক্ত জায়গাতে সাহসী পাঠ্য থাকতে পারে। দীর্ঘ শব্দগুলির জন্য, আপনি বিভিন্ন মার্জিন চয়ন করতে পারেন। এটি কেবলমাত্র অন্য একটি কাজ কিন্তু আমার জন্য কাজ করছে।

Comments

আমি একটি অনুরূপ সমাধান ব্যবহার করেছি, তবে আমার জন্য - কেবল 'মার্জিন: 0 -2px' যোগ করার শৈলীতে (এবং সাধারণ স্টাইলে অন্য কিছু যোগ না করে) - দুর্দান্ত কাজ করেছে।

— যুবাল এ

আপনার স্ট্রিং দৈর্ঘ্যের মধ্যে কোনও পরিবর্তনশীলতা থাকলে এটি কাজ করে না

— কেট

Answer 11

আমি পরিবর্তে পাঠ্য-ছায়া ব্যবহার করতে চাই। বিশেষত কারণ আপনি পাঠ্য-ছায়া সঞ্চারিত করতে ট্রানজিশন ব্যবহার করতে পারেন।

আপনার যা প্রয়োজন তা হ'ল:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

সম্পূর্ণ নেভিগেশনের জন্য এই jsfiddle দেখুন: https://jsfiddle.net/831r3yrb/

পাঠ্য-ছায়ায় ব্রাউজার সমর্থন এবং আরও তথ্য: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Comments

এটি রূপান্তরগুলির ব্যবহারের সাথে দুর্দান্ত কাজ করে। দুর্দান্ত বিকল্প সমাধান।

— ইয়াজমিন

Answer 12

আমি হোভারের উপর ফন্ট (°) স্যুইচ করার বিরুদ্ধে পরামর্শ দেব। এই ক্ষেত্রে এটি কেবল মেনু আইটেমগুলি কিছুটা সরছে তবে আমি এমন কেসগুলি দেখেছি যেখানে সম্পূর্ণ অনুচ্ছেদটি পুনরায় ফর্ম্যাট হয়ে যায় কারণ প্রশস্তকরণের ফলে অতিরিক্ত শব্দ মোড়ানো হয়। আপনি যখন এটি করতে চান তখন কেবল কার্সারটি সরানো হয়; আপনি যদি কিছু না করেন তবে পৃষ্ঠার বিন্যাসটি পরিবর্তন করা উচিত নয়।

স্বাভাবিক এবং ইটালিকের মধ্যে স্যুইচ করার সময় শিফটটিও ঘটতে পারে। আমি রঙ পরিবর্তন করার চেষ্টা করব বা টেক্সটের নীচে জায়গা থাকলে আন্ডারলাইন টগল করব। (আন্ডারলাইনিং নীচের সীমানা থেকে পরিষ্কার থাকা উচিত)

আমি যদি আমার ফর্ম ডিজাইনের ক্লাসের জন্য ফন্টগুলি স্যুইচিং ব্যবহার করি তবে আমি বোধ করব :-)

(।) ফন্ট শব্দের প্রায়শই অপব্যবহার করা হয়। "ভার্দানা" একটি টাইপফেস , "ভার্দানা নরমাল" এবং "ভার্দানা বোল্ড" একই টাইপফেসের বিভিন্ন ফন্ট ।

Answer 13

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}

<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

Answer 14

আমি এখানে কিছু উল্লিখিত হিসাবে পাঠ্য-ছায়া সমাধান ব্যবহার করি:

text-shadow: 0 0 0.01px;

পার্থক্যটি হ'ল আমি ছায়ার রঙ নির্দিষ্ট করি না, সুতরাং এই সমাধানটি সমস্ত ফন্টের রঙের জন্য সর্বজনীন।

Answer 15

বিকল্প বিকল্প হ'ল পাঠ্য-ছায়ার মাধ্যমে সাহসী পাঠকে "অনুকরণ" করা। এটিতে ফন্ট আইকনগুলিতেও কাজ করার জন্য বোনাস (/ ম্যালাস, আপনার ক্ষেত্রে নির্ভর করে) রয়েছে।

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

কিন্ডা হ্যাকি, যদিও এটি আপনাকে পাঠ্যটিকে নকল করা থেকে বাঁচায় (এটি যদি অনেকটা কার্যকর হয় তবে এটি আমার ক্ষেত্রে যেমন ছিল)।

Answer 16

এটি আমার পছন্দ মতো সমাধান। এর জন্য কিছুটা জেএস প্রয়োজন তবে আপনার শিরোনামের সম্পত্তিটি হুবহু হতে হবে এবং আপনার সিএসএস খুব সহজ থাকতে পারে।

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Answer 17

এই সম্পর্কে কি? একটি জাভাস্ক্রিপ্ট - CSS3 বিনামূল্যে সমাধান।

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

Comments

সমস্যাটি সমাধানের জন্য এটি বেশ অনেকগুলি অতিরিক্ত মার্কআপ এবং সিএসএস ... এটি বিকাশকারী, এসইও বা ভবিষ্যতের বান্ধব নয়

— জ্যাচ সাউশিয়ার

Answer 18

খুব মার্জিত সমাধান নয়, তবে "কাজ করে":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

Answer 19

আমি উপরের কৌশলগুলির একগুচ্ছকে এমন কিছু সরবরাহের জন্য একত্রিত করেছি যা জেএস বন্ধ হয়ে যায় এবং কিছুটা জিক্যুরির সাথে আরও ভাল। এখন যে উপ-পিক্সেল লেটার-স্পেসিংয়ের জন্য ব্রাউজারগুলি সমর্থন করছে তা উন্নত হচ্ছে, এটি ব্যবহার করে খুব সুন্দর।

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Answer 20

এর আগে একটি :: এর পরিবর্তে :: :: এর পরে এটি ব্যবহার করা ভাল :

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

আরও তথ্যের জন্য: https://jsfiddle.net/r25foavy/

Comments

আপনি দয়া করে কেন এর a::beforeচেয়ে ভাল হতে পারে তার একটি যুক্তিসঙ্গততা সরবরাহ করতে পারেন a::after? এটি আপনার উত্তরের মূল অংশ হিসাবে মনে হচ্ছে তবে এক্ষেত্রে কেন একজন অপরটির চেয়ে পছন্দনীয় তা স্পষ্ট নয়।

— nirvdrum

Answer 21

সাহসী সাফল্য হোভার করার সময় আমি মেনু স্থির করেছিলাম। এটি প্রতিক্রিয়াশীল সমর্থন করে, এটি আমার কোড:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Answer 22

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে বিরত না হন, পৃষ্ঠাটি প্রদর্শিত হওয়ার পরে আপনি যথাযথ প্রস্থটি সেট করতে পারেন। আমি কীভাবে এটি করেছি (প্রোটোটাইপ ব্যবহার করে):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

Comments

জাভাস্ক্রিপ্ট প্রশ্নের মধ্যে ট্যাগ করা হয়নি, jQuery একা যাক। প্রশ্নটিতে ট্যাগ করা ভাষাগুলি ব্যবহার করে উত্তরটি রাখুন

— জ্যাচ সসাইয়ার

Answer 23

যখন সমস্যার সমাধানের সহজ সমাধান আছে তখন কেউ আপনাকে সেভাবে কিছু না করতে বললে আমি সত্যিই এটি দাঁড়াতে পারি না। আমি লি উপাদানগুলির বিষয়ে নিশ্চিত নই, তবে আমি কেবল একই সমস্যাটি স্থির করেছি। আমার ডিভ ট্যাগ সহ একটি মেনু আছে।

ডিভ ট্যাগটি কেবল "প্রদর্শন: ইনলাইন-ব্লক" হিসাবে সেট করুন। ইনলাইন করুন যাতে তারা একে অপরের পাশে বসে থাকে এবং এতে কোনও প্রস্থ নির্ধারণ করতে পারে set গা the় পাঠ্যের জন্য উপযুক্ত প্রশস্ততা প্রস্থটি ঠিক করুন এবং পাঠ্য কেন্দ্রটি সারিবদ্ধ করুন।

(দ্রষ্টব্য: এটি আমার এইচটিএমএলকে [নীচে] সরিয়ে দিচ্ছে) মনে হচ্ছে, তবে প্রতিটি মেনু আইটেমটিতে করাসস্পন্ডিং আইডি এবং সন্ধানবার_ক্যাটোগোরি ক্লাসের নামটি দিয়ে তার চারপাশে একটি ডিভ ট্যাগ আবৃত ছিল ie অর্থাৎ: <div id="ROS_SearchSermons" class="SearchBar_Category">

এইচটিএমএল (প্রতিটি মেনু আইটেমের চারপাশে আমার অ্যাঙ্কর ট্যাগ ছিল, তবে আমি সেগুলি নতুন ব্যবহারকারী হিসাবে জমা দিতে সক্ষম হইনি)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

সিএসএস:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

Comments

এই প্রস্থ নির্ধারণ ঠিক ওপি নিদিষ্ট ব্যবহার করা হয় না কেস। যেমন, এই উত্তরটি জিজ্ঞাসা করা প্রশ্নের উত্তর দেয় না

— জ্যাচ সসাইয়ার

Answer 24

এটা চেষ্টা কর:

.nav {
  font-family: monospace;
}

Comments

কিভাবে যে কিছু পরিবর্তন হবে?

— নির্জনতা

@ MiXT4PE মনোস্পেসের সাথে অক্ষরগুলির নিয়মিত বা গা bold় ক্ষেত্রে একই আকার থাকে। আকার পরিবর্তন হবে না

— Yukulélé

কারণ হ'ল ফন্টের পরিবার পরিবর্তন করা কোনও সমাধান নয়

— ফানকিসুল

কোনও ইউআই বাগ ঠিক করতে ফন্ট-পরিবার পরিবর্তন করা কোনও সমাধান নয়, কারণ ফন্ট-পরিবার বেশিরভাগ সময় সমস্ত ব্র্যান্ডের টাইপোগ্রাফির মূল।

— উমায়ের হাফিজ

টাইপোগ্রাফিটি ইউআই ডিজাইনের একটি বড় অংশ এবং কোনও ব্র্যান্ডের জন্য নকশাকৃত টাইপফেসগুলি ইউআই-তে তাদের ব্যবহারের বিষয়টি বিবেচনা করা উচিত। পিটি সানস এবং ক্লিয়ার সানস দুটি টাইপফেস যাগুলির গ্লাইফ স্পেসিং ওজন জুড়ে সমান। দুর্ভাগ্যক্রমে, এটি সত্য যে খুব কম (মণোস্পেসডেড) টাইপফেসগুলির এই সম্পত্তি রয়েছে এবং টাইপফেসের বিকাশের জন্য অর্থ প্রদানের চেয়ে প্রশ্নের অন্য উত্তরগুলির একটি প্রয়োগ করা সম্ভবত এটি সস্তা। যাইহোক, পরিবর্তনশীল ফন্টের প্রাপ্যতার উন্নতি হওয়ায় এটি পরিবর্তন হবে। পরিবর্তনশীল প্রস্থ + ওজন সহ ফন্টগুলির জন্য v-fouts.com দেখুন ।

— পিটার ডাব্লু

Answer 25

নিয়মিতর চেয়ে গা the় পাঠ্য যদি আরও প্রশস্ত হয় তবে আপনি নেতিবাচক মার্জিনগুলিও চেষ্টা করতে পারেন। (সর্বদা নয়) সুতরাং ধারণাটি হ'ল স্টেট স্টাইল করার পরিবর্তে ক্লাস ব্যবহার করা উচিত।

JQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

সিএসএস:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

আমি সাহায্য করতে পারে আশা করি!

Comments

দয়া করে ট্যাগযুক্তগুলি বাদে অন্য ভাষায় উত্তর পোস্ট করবেন না। এটি জিজ্ঞাসা করা প্রশ্নের উত্তর দেয় না

— জ্যাচ সসিয়ের